Paint 应用程序的 OpenGL ES 内容的屏幕截图

Posted

技术标签:

【中文标题】Paint 应用程序的 OpenGL ES 内容的屏幕截图【英文标题】:Screenshot of OpenGL ES content for Paint app 【发布时间】:2011-09-21 11:36:07 【问题描述】:

我正在为 iphone 开发一个绘画应用程序。在我的代码中,我使用了一个包含轮廓图像的 imageView,我在其上放置了 CAEAGLLayer 以填充轮廓图像中的颜色。现在我正在使用函数截取 OpenGL ES [CAEAGLLayer] 渲染的内容:

- (UIImage*)snapshot:(UIView*)eaglview
GLint backingWidth1, backingHeight1;

// Bind the color renderbuffer used to render the OpenGL ES view
// If your application only creates a single color renderbuffer which is already bound at this point, 
// this call is redundant, but it is needed if you're dealing with multiple renderbuffers.
// Note, replace "_colorRenderbuffer" with the actual name of the renderbuffer object defined in your class.
glBindRenderbufferOES(GL_RENDERBUFFER_OES, viewRenderbuffer);

// Get the size of the backing CAEAGLLayer
glGetRenderbufferParameterivOES(GL_RENDERBUFFER_OES, GL_RENDERBUFFER_WIDTH_OES, &backingWidth1);
glGetRenderbufferParameterivOES(GL_RENDERBUFFER_OES, GL_RENDERBUFFER_HEIGHT_OES, &backingHeight1);

NSInteger x = 0, y = 0, width = backingWidth1, height = backingHeight1;
NSInteger dataLength = width * height * 4;
GLubyte *data = (GLubyte*)malloc(dataLength * sizeof(GLubyte));

// Read pixel data from the framebuffer
glPixelStorei(GL_PACK_ALIGNMENT, 4);
glReadPixels(x, y, width, height, GL_RGBA, GL_UNSIGNED_BYTE, data);

// Create a CGImage with the pixel data
// If your OpenGL ES content is opaque, use kCGImageAlphaNoneSkipLast to ignore the alpha channel
// otherwise, use kCGImageAlphaPremultipliedLast
CGDataProviderRef ref = CGDataProviderCreateWithData(NULL, data, dataLength, NULL);
CGColorSpaceRef colorspace = CGColorSpaceCreateDeviceRGB();
CGImageRef iref = CGImageCreate(width, height, 8, 32, width * 4, colorspace, kCGBitmapByteOrder32Big | kCGImageAlphaPremultipliedLast,
                                ref, NULL, true, kCGRenderingIntentDefault);

// OpenGL ES measures data in PIXELS
// Create a graphics context with the target size measured in POINTS
NSInteger widthInPoints, heightInPoints;
if (NULL != UIGraphicsBeginImageContextWithOptions) 
    // On ios 4 and later, use UIGraphicsBeginImageContextWithOptions to take the scale into consideration
    // Set the scale parameter to your OpenGL ES view's contentScaleFactor
    // so that you get a high-resolution snapshot when its value is greater than 1.0
    CGFloat scale = eaglview.contentScaleFactor;
    widthInPoints = width / scale;
    heightInPoints = height / scale;
    UIGraphicsBeginImageContextWithOptions(CGSizeMake(widthInPoints, heightInPoints), NO, scale);

else 
    // On iOS prior to 4, fall back to use UIGraphicsBeginImageContext
    widthInPoints = width;
    heightInPoints = height;
    UIGraphicsBeginImageContext(CGSizeMake(widthInPoints, heightInPoints));


CGContextRef cgcontext = UIGraphicsGetCurrentContext();

// UIKit coordinate system is upside down to GL/Quartz coordinate system
// Flip the CGImage by rendering it to the flipped bitmap context
// The size of the destination area is measured in POINTS
CGContextSetBlendMode(cgcontext, kCGBlendModeCopy);
CGContextDrawImage(cgcontext, CGRectMake(0.0, 0.0, widthInPoints, heightInPoints), iref);

// Retrieve the UIImage from the current context
UIImage *image = UIGraphicsGetImageFromCurrentImageContext();

UIGraphicsEndImageContext();

// Clean up
free(data);
CFRelease(ref);
CFRelease(colorspace);
CGImageRelease(iref);

return image;

使用函数将此屏幕截图与轮廓图像结合起来:

- (void)Combine:(UIImage *)Back


UIImage *Front =backgroundImageView.image;


//UIGraphicsBeginImageContext(Back.size);  
UIGraphicsBeginImageContext(CGSizeMake(640,960));
// Draw image1  
[Back drawInRect:CGRectMake(0, 0, Back.size.width*2, Back.size.height*2)];  

// Draw image2  
[Front drawInRect:CGRectMake(0, 0, Front.size.width*2, Front.size.height*2)];  

UIImage *resultingImage = UIGraphicsGetImageFromCurrentImageContext();  


UIImageWriteToSavedPhotosAlbum(resultingImage, nil, nil, nil);


UIGraphicsEndImageContext();  

使用功能将此图像保存到相册

 -(void)captureToPhotoAlbum 
[self Combine:[self snapshot:self]];
UIAlertView *alert = [[UIAlertView alloc] initWithTitle:@"Success" message:@"Image saved to Photo Album" delegate:nil cancelButtonTitle:@"OK" otherButtonTitles:nil];
[alert show];
[alert release];    

上面的代码可以运行,但屏幕截图的图像质量很差。在画笔的轮廓上,有一条浅灰色的轮廓。我已经上传了我的应用程序的屏幕截图,它是 opengles 内容和 UIImage 的组合。

有什么办法可以得到opengles-CAEaglelayer内容的视网膜显示截图。

提前谢谢你!

【问题讨论】:

【参考方案1】:

我不认为解决方案是您的问题。如果您的绘图出现在屏幕上时没有看到其灰色轮廓,那么您很可能在保存过程中观察到了压缩伪影。您的图像可能被保存为质量较低的 JPEG 图像,其中会出现在锐利边缘上的伪影,就像您绘图中的边缘一样。

为了解决这个问题,Ben Weiss 的回答 here 提供了以下代码,用于强制将您的图像以 PNG 格式保存到照片库中:

UIImage* im = [UIImage imageWithCGImage:myCGRef]; // make image from CGRef
NSData* imdata =  UIImagePNGRepresentation ( im ); // get PNG representation
UIImage* im2 = [UIImage imageWithData:imdata]; // wrap UIImage around PNG representation
UIImageWriteToSavedPhotosAlbum(im2, nil, nil, nil); // save to photo album

虽然这可能是解决您的问题的最简单方法,但您也可以尝试使用多重采样抗锯齿,正如 Apple 在 iOS 的 OpenGL ES 编程指南的“Using Multisampling to Improve Image Quality”部分中所描述的那样。根据您对填充率的限制,MSAA 可能会导致您的应用程序稍微变慢。

【讨论】:

谢谢布拉德,这就是我要找的!【参考方案2】:

您在创建 CG 位图上下文时使用的是 kCGImageAlphaPremultipliedLast。虽然我看不到您的 OpenGL 代码,但在我看来,您的 OpenGL 上下文不太可能呈现预乘 alpha。不幸的是,IIRC,不可能在 iOS 上创建非预乘的 CG 位图上下文(它将使用 kCGImageAlphaLast,但我认为这只会使创建调用失败),因此您可能需要在之间手动预乘数据从 OpenGL 中获取并制作 CG 上下文。

另一方面,您的 OpenGL 上下文具有 Alpha 通道是否有原因?你能不能让它变成不透明的白色,然后使用 kCGImageAlphaNoneSkipLast?

【讨论】:

以上是关于Paint 应用程序的 OpenGL ES 内容的屏幕截图的主要内容,如果未能解决你的问题,请参考以下文章

缩放 OpenGL ES 帧缓冲区的内容

在 OpenGL ES 中,如何将绘图“剪辑”到矩形?

绘制分层 OpenGL ES 内容的最佳方式是啥?

OpenGL ES纹理

Android OpenGL ES绘制三角形

OpenGL ES 学习 -- 正交投影