Webview中无需XHR，JS能否将已加载img转为Base64用于jsPDF？

无需XHR，用Canvas转换已加载图片为Base64 #

页面加载完成后，浏览器已经把图片缓存到本地，你可以借助Canvas API直接将已渲染的图片转为Base64，完全不需要XHR请求。原理是利用Canvas绘制已加载的图片，再通过toDataURL()方法导出Base64格式的数据。

实现步骤： #

• 遍历页面中所有<img>元素
• 对每个已加载完成的图片，创建Canvas元素并绘制图片
• 将Canvas导出为Base64字符串，替换原图片的src（可选，方便jsPDF直接读取）

代码示例： #

// 确保所有资源加载完成后执行
window.onload = function() {
  document.querySelectorAll('img').forEach(img => {
    // 跳过已经是Base64的图片
    if (img.src.startsWith('data:')) return;
    
    // 创建Canvas
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    
    // 设置Canvas尺寸与图片一致
    canvas.width = img.naturalWidth;
    canvas.height = img.naturalHeight;
    
    // 绘制图片到Canvas
    ctx.drawImage(img, 0, 0);
    
    // 导出Base64（默认是PNG格式，可指定为JPEG：canvas.toDataURL('image/jpeg', 0.9)）
    const base64Url = canvas.toDataURL();
    
    // 将Base64设置回img的src，后续jsPDF直接读取这个Base64
    img.src = base64Url;
  });
};

关于本地缓存图片的使用 #

你提到的“本地图片”其实就是浏览器缓存中的图片，上面的Canvas方法本质就是直接使用了缓存里的图片资源——因为图片已经加载完成，drawImage()会直接从缓存读取图片数据，不会发起新的网络请求（包括XHR）。

注意事项： #

1. 跨域图片处理：如果图片来自跨域地址，需要确保图片服务器配置了CORS允许，且你的<img>元素设置了crossOrigin="anonymous"属性，否则Canvas绘制会报错，无法导出Base64。如果页面已经能正常加载跨域图片，通常服务器已经允许CORS，只需给img加上该属性即可。
2. 图片加载状态：必须确保图片完全加载完成后再执行转换，否则drawImage()可能无法正常绘制图片，导致Base64为空或损坏。使用window.onload或者监听单个img的load事件都是可靠的方式。
3. 性能考量：如果页面中有大量高清图片，批量转换可能会占用较多内存，建议按需转换（比如只转换jsPDF需要用到的图片）。

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