Automatically save a HTML from a WKWebView to app's tmp directory

Question

I have a WKWebView that can visit arbitrary websites. When a user clicks on any HTML <img> element, I'd like it to transparently save that image (as a file) into the app tmp directory, ideally with standard title (img.png), and ideally such that it would overwrite each time.

Given that client-side JavaScript has no access to the filesystem, I expect that a fully automatic solution would involve FileManager; however, I don't know how I'd transmit the <img> data from the WKWebView to a FileManager instance. I wonder whether JavaScriptCore might need to be involved, to bridge the data between the two.

I see that semi-automatic solutions exist, through the use of a HTML download attribute, wherein the user is prompted with a 'Save As..." dialogue. This is not ideal, as I would like the action to be transparent and free of user error. However, it may prove to be the only option.

I am implementing this on both macOS and iOS, so I can accept a solution for either platform; I expect there will be little difference between the two.

Answer 1

May I propose the following :

1. Prepare your view controller to receive messages from the javascript side of the WKWebView. I usually do that in the view controller's viewDidLoad.
2. Load and execute a javascript in the web page that will add an onClick event to each img tag.
3. In that event, you send a message back from javascript to Objective-C / Swift side with a Base64 encoded string of the image data as parameter
4. In the Objective-C / Swift handler of the message, you transform that string in data and save it.

Step 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] ;
}

Step 3 :

The 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) ;
    } ;
}

Step 4 :

When the "imageHasBeenCLicked" message is received by the view controller, then convert the Base64 string into data and save it as an image file.

- (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] ;
    }
}