问题
I am having serious trouble with taking screenshot of WKWebview content when there is hardware accelerated content (some specific casino games that are running inside iframe). So far I used the standard way of taking screenshot like everyone suggests:
UIGraphicsBeginImageContextWithOptions(containerView.frame.size, true, 0.0)
containerView.layer.render(in: UIGraphicsGetCurrentContext()!)
//This line helps to fix view rendering for taking screenshot on older iOS devices
containerView.drawHierarchy(in: containerView.bounds, afterScreenUpdates: true)
let image = UIGraphicsGetImageFromCurrentImageContext()!
UIGraphicsEndImageContext()
This method works really nicely until I get some content inside my WKWebview that is rendered by GPU. GPU rendered content appears black on a screenshot. I tried all the tricks that are possible with this method but nothing helps. Even the XCode view hierarchy debugger cant show that hardware accelerated content. Therefore, similar to Android, I need another way to take a screenshot. I solved the similar problem on Android already by starting to record everything that is happening on screen and stopping screen record after I got the first image.
I have went through numerous Stack Overflow questions and solutions but they are all mostly in Obj-C (which I totally suck at), outdated or just not specific enough for my needs.
Now what I found out, is that I can use glReadPixels to read pixels right out OpenGL (if my content is hardware accelerated it would make sense that I can read those pixels from graphics card then, right ??)
So far I have managed to create a Swift snippet that does something like renderBuffer -> frameBuffer -> glReadPixels -> image
let width = Int(containerView.frame.size.width)
let height = Int(containerView.frame.size.height)
//BeginImageContext code was run above
let api = EAGLRenderingAPI.openGLES3
let context2 = EAGLContext(api: api)
EAGLContext.setCurrent(context2)
// Setup render buffer
var renderBuffer : GLuint = GLuint()
let size = GLsizei(10)
glGenRenderbuffers(size, &renderBuffer)
glBindRenderbuffer(GLenum(GL_RENDERBUFFER), renderBuffer)
let bufferWidth = GLsizei(width * 1)
let bufferHeight = GLsizei(height * 1)
let bufferFormat = GLenum(GL_RGBA8)
glRenderbufferStorage(GLenum(GL_RENDERBUFFER), bufferFormat, bufferWidth, bufferHeight)
// Setup frame buffer
var frameBuffer = GLuint()
glGenFramebuffers(GLsizei(10), &frameBuffer)
glBindFramebuffer(GLenum(GL_FRAMEBUFFER), frameBuffer)
glFramebufferRenderbuffer(GLenum(GL_FRAMEBUFFER), GLenum(GL_COLOR_ATTACHMENT0), GLenum(GL_RENDERBUFFER), renderBuffer)
// Draw
glReadBuffer(GLenum(GL_RENDERBUFFER))
glClearColor(0.1, 0.2, 0.3, 0.2)
glClear(GLbitfield(GL_COLOR_BUFFER_BIT))
//--------------
let bytes = malloc(width*height*4)
let bytes2 = malloc(width*height*4)
let x : GLint = GLint(0)
let y : GLint = GLint(0)
let w : GLsizei = GLsizei(width)
let h : GLsizei = GLsizei(height)
glReadPixels(x, y, w, h, GLenum(GL_RGBA), GLenum(GL_UNSIGNED_BYTE), bytes)
let data = NSData(bytes: bytes, length: width * height * 4)
let dataProvider = CGDataProvider(data: data)
//let dataProvider2 = CGDataProvider(dataInfo: nil, data: bytes!, size: width * height * 4, releaseData: )
let colorspace = CGColorSpaceCreateDeviceRGB()
let bitmapInfo: CGBitmapInfo = [.byteOrder32Little, CGBitmapInfo(rawValue: CGImageAlphaInfo.last.rawValue)]
let aCGImage = CGImage(
width: Int(width),
height: Int(height),
bitsPerComponent: 8,
bitsPerPixel: 32,
bytesPerRow: 4 * Int(width),
space: colorspace,
bitmapInfo: bitmapInfo,
provider: dataProvider!,
decode: nil,
shouldInterpolate: true,
intent: .defaultIntent
)!
let imaag = UIImage(cgImage: aCGImage)
//I get the image of the same color that is defined at clearColor
Now my question is, am I going the right way? Is it possible that I can get my WKWebview (or take a snapshot of it and make it into UIView) somehow to renderBuffer / frameBuffer so that glReadPixels would ACTUALLY READ what is on the screen?
PS! I have seen numerous questions about getting UIImage out of CAEAGLView, but in my case, its not CAEGLView but WKWebview instead. Much appreciated.
回答1:
I have a easy way to take the snapshot, there is the code.
- (void)screenLoogShoot:(void (^)(UIImage *fullImage))snapShotHandler {
WKWebView *webView = self.webView;
UIScrollView *scrollView = webView.scrollView;
CGFloat boundsWidth = scrollView.bounds.size.width;
CGFloat contentHeight = scrollView.contentSize.height;
CGFloat scale = [UIScreen mainScreen].scale;
CGRect oldFrame = self.webView.frame;
if (@available(iOS 11.0, *)) {
self.webView.frame = CGRectMake(0, 0, boundsWidth, contentHeight);
dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(0.3 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
WKSnapshotConfiguration *configuration = [WKSnapshotConfiguration new];
configuration.rect = CGRectMake(0, 0, boundsWidth, contentHeight);
configuration.snapshotWidth = @(boundsWidth);
[self.webView takeSnapshotWithConfiguration:configuration completionHandler:^(UIImage * _Nullable snapshotImage, NSError * _Nullable error) {
UIGraphicsBeginImageContextWithOptions(CGSizeMake(boundsWidth, contentHeight), NO, scale);
[snapshotImage drawInRect:CGRectMake(0, 0, boundsWidth, contentHeight)];
UIImage *fullImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
self.webView.frame = oldFrame;
snapShotHandler(fullImage);
}];
});
} else {
self.webView.frame = CGRectMake(0, 0, boundsWidth, contentHeight);
dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(0.3 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
UIGraphicsBeginImageContextWithOptions(CGSizeMake(webView.bounds.size.width, webView.bounds.size.height), NO, scale);
[webView drawViewHierarchyInRect:CGRectMake(0, 0, boundsWidth, contentHeight) afterScreenUpdates:YES];
UIImage *fullImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
self.webView.frame = oldFrame;
!snapShotHandler ? : snapShotHandler(fullImage);
});
}
}
来源：https://stackoverflow.com/questions/45690932/taking-screenshot-of-wkwebview-with-hardware-accelerated-content