如何在WKWebView的DidFinish回调中获取指定HTML图片为UIImage？

当然可以实现！我在项目里正好处理过类似需求，下面给你拆解具体步骤和代码，都是经过验证的可行方案～

核心思路 #

要把网页里的img转成UIImage，核心是先通过JavaScript获取到图片的Base64编码（避免路径解析的麻烦），再把Base64字符串解码成iOS的UIImage。刚好可以在webView(_:didFinish:)回调里完成这个操作。

具体实现代码 #

直接上完整的Swift代码示例，你可以直接套用到你的项目里：

func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {
    // 编写JS脚本：获取目标img并转为Base64格式
    let getImageBase64Script = """
    var targetImg = document.getElementById('image_id');
    if (!targetImg) {
        return null; // 没找到目标图片就返回null
    }
    // 创建canvas来绘制图片
    var canvas = document.createElement('canvas');
    canvas.width = targetImg.width;
    canvas.height = targetImg.height;
    var ctx = canvas.getContext('2d');
    ctx.drawImage(targetImg, 0, 0);
    // 转成jpeg格式的Base64字符串
    return canvas.toDataURL('image/jpeg');
    """
    
    // 执行JS脚本
    webView.evaluateJavaScript(getImageBase64Script) { [weak self] result, error in
        guard let self = self else { return }
        
        // 先处理错误情况
        if let error = error {
            print("获取图片出错啦：\(error.localizedDescription)")
            return
        }
        
        guard let base64Str = result as? String, !base64Str.isEmpty else {
            print("没找到目标图片或者图片为空哦")
            return
        }
        
        // 移除Base64字符串的前缀（data:image/jpeg;base64,）
        let pureBase64Str = base64Str.replacingOccurrences(of: "data:image/jpeg;base64,", with: "")
        // 解码成Data
        guard let imageData = Data(base64Encoded: pureBase64Str) else {
            print("Base64解码失败啦")
            return
        }
        // 转成UIImage
        guard let captchaImage = UIImage(data: imageData) else {
            print("Data转UIImage失败")
            return
        }
        
        // 到这里就成功拿到目标图片啦！可以做后续操作
        print("成功获取验证码图片：\(captchaImage)")
        // 比如把图片显示到你的UIImageView上
        // self.captchaImageView.image = captchaImage
    }
}

要注意的几个坑 #

• 图片懒加载问题：有时候网页的图片是懒加载的，didFinish回调触发时图片还没加载完成，这时候JS会获取不到图片。你可以试试延迟1-2秒执行JS，或者给目标img添加onload事件监听，等图片加载完成再执行转换逻辑。
• 跨域限制：如果图片来自其他域名，可能会触发canvas的跨域安全限制，导致drawImage失败。这时候需要图片所在的服务器配置CORS头，或者在WKWebView的配置里允许跨域（不过后者不推荐，有安全风险）。
• 图片格式：如果你的图片是PNG格式，记得把JS里的image/jpeg改成image/png，解码的时候也要对应处理。

内容的提问来源于stack exchange，提问作者Nitesh