iOS WebGL 界面截图

2,178 阅读1分钟
iOS 原生的几种截图方式无法截取 WebGL 的图像数据,所以最终使用了 JS 交互的方式解决的。
- (void)captureWebGLImage:(void(^)(UIImage *image))block {
    
    __block UIImage *image = nil;
    
    // JS 函数名
    NSString *script = @"getWebGLImage();";
    [self.wkWebView evaluateJavaScript:script completionHandler:^(id _Nullable response, NSError * _Nullable error) {
        NSLog(@"----------- response: %@, error: %@", response, error);
        
        if (![response isKindOfClass:[NSNull class]]) {
            NSString *res = (NSString *)response;
            if (res.length > 22) {
                // 截取 JS 执行完毕后的 base64 数据
                NSString *resString = [NSString stringWithFormat:@"%@", [res substringFromIndex:22]];
                NSData *data = [[NSData alloc] initWithBase64EncodedString:resString options:NSDataBase64DecodingIgnoreUnknownCharacters];
                image = [[UIImage alloc] initWithData:data];
            }
            block(image);
        } else {
            block(nil);
        }
    }];
}
附上 JS 代码...
<script type='text/javascript'>function getWebGLImage() {
    var container = document.getElementById("xxxx");
    var canvas = container.getElementsByTagName("canvas")[2];
    return canvas.toDataURL("image/png");
  } </script>