自动将 HTML <img> 从 WKWebView 保存到应用程序的 tmp 目录

Question

我有一个可以访问任意网站的 WKWebView。当用户单击任何 HTML <img> 元素时，我希望它将该图像（作为文件）透明地保存到应用程序 tmp 目录中，理想情况下使用标准标题（img.png），并且理想情况下它每次都会覆盖。

鉴于客户端 JavaScript 无法访问文件系统，我预计全自动解决方案将涉及 FileManager；但是，我不知道如何将<img> 数据从WKWebView 传输到FileManager 实例。我想知道是否可能需要涉及JavaScriptCore，以在两者之间架起数据桥梁。

我看到 semi-automatic solutions exist，通过使用 HTML download 属性，其中提示用户“另存为...”对话框。这并不理想，因为我希望该操作是透明且没有用户错误。但是，它可能被证明是唯一的选择。

我在 macOS 和 iOS 上都实现了这个，所以我可以接受任何一个平台的解决方案；我预计两者之间不会有什么不同。

Answer 1

我可以提出以下建议吗：

1. 准备好您的视图控制器以接收来自 WKWebView 的 javascript 端的消息。我通常在视图控制器的viewDidLoad 中这样做。
2. 在网页中加载并执行一个 javascript，它将为每个 img 标记添加一个 onClick 事件。
3. 在这种情况下，您将使用图像数据的 Base64 编码字符串作为参数从 javascript 向 Objective-C / Swift 端发送回消息
4. 在消息的 Objective-C / Swift 处理程序中，将该字符串转换为数据并保存。

第 1 步和第 2 步：

- (void)    viewDidLoad
{
    [super viewDidLoad] ;
    WKUserContentController *controller = self.webView.configuration.userContentController ;

    //  Add self as scriptMessageHandler of the webView to receive messages from the scripts
    [controller addScriptMessageHandler:self
                                   name:@"imageHasBeenClicked"] ;

    //  Load script
    NSURL       *scriptURL      = <<... URL of your javascript (can be bundled in your app) ...>> ;
    NSString    *scriptString   = [NSString stringWithContentsOfURL:scriptURL
                                                           encoding:NSUTF8StringEncoding
                                                              error:NULL] ;
    WKUserScript    *script = [[WKUserScript alloc] initWithSource:scriptString
                                                     injectionTime:WKUserScriptInjectionTimeAtDocumentEnd
                                                  forMainFrameOnly:YES] ;
    [controller addUserScript:script] ;
}

第 3 步：

javascript：

//  This function takes an image tab and encodes the image as BAse64
function getBase64Image(img)
{
    // Create an empty canvas element
    var canvas      = document.createElement("canvas") ;
    canvas.width    = img.width;
    canvas.height   = img.height;

    // Copy the image contents to the canvas
    var ctx         = canvas.getContext("2d") ;
    ctx.drawImage(img,0,0) ;

    // Get the data-URL formatted image, use PNG as JPG re-encode the image
    var dataURL     = canvas.toDataURL("image/png");

    //  Remove the initial marker so that we directly have NSData compatibility
    return dataURL.replace(/^data:image\/(png|jpg);base64,/,"");
}

//  Search for all img tags and add an onclick event that will encode the image
//  then, send it to the objective-c side
var imgList = document.getElementsByTagName("img") ;
for (var i = 0; i < imgList.length; i++)
{
    imgList[i].onclick = function()
    {
        var txt = getBase64Image(this) ;
        window.webkit.messageHandlers["imageHasBeenClicked"].postMessage(txt) ;
    } ;
}

第 4 步：

当视图控制器收到“imageHasBeenCLicked”消息后，将Base64字符串转换为数据，保存为图片文件。

- (void)    userContentController:(WKUserContentController*)userContentController
      didReceiveScriptMessage:(WKScriptMessage*)message
{
    if ([message.name isEqualToString:@"imageHasBeenClicked"])
    {
        NSData *data    = [[NSData alloc] initWithBase64EncodedString:message.body
                                                          options:0] ;
       [data writeToFile:@"/toto.png"
              atomically:YES] ;
    }
}