Extract images loaded in a WKWebView

Related: https://developer.apple.com/forums/thread/47176

Hey all,

I have a WKWebView running in the background of a SwiftUI app which loads webpages that have images in them: <img src="…" /> and would like to extract those image data from the WKWebView for using in my SwiftUI app. The app is supposed to run on iOS and macOS (sandboxed).

I have a working solution of this, where I use WKWebView's evaluateJavaScript() to get the URL in the src attribute of the img-tag and then download that url in Swift to a Data object for further processing. While this solution works, it requires fetching the image a second time, which at best adds network load and at worst returns a different image.

There is the option of re-rendering the img element to a canvas, extracting the ImageData from there using Javascript, and returning the blob to Swift. According to SO, rendering an img element to a canvas can disturb the image and this seems like an unstable workaround at best, so I have been looking for alternatives of directly getting the image from WKWebView. Are any of the following ideas feasible to extract image data from a WKWebView?

  1. Cache: Use WKWebsiteDataStore to fetch a WKWWebsiteDataRecord including the cached images (see here). Or could the image be showing on the WKWebView but not be saved in cache?
  2. Webarchive: Create a webarchive of the WKWebView (see here) and extract the image from there. Is there any documentation on parsing .webarchive files?
  3. Intercept network requests and responses: When using Safari web inspector's Network monitor, I can see all network requests and responses (including images). However, when using WKNavigationDelegate's method for intercepting WKNavigationActions (see here), I do not see image requests. Is there a way to see all network requests of a WKWebView including requests that load images into an img-element?

Thank you! Cheers, Anton

Extract images loaded in a WKWebView
 
 
Q