html2canvas调用报错Error loading Image及不安全操作异常如何解决？

• 你是直接通过file://协议打开本地HTML文件运行代码，浏览器对本地文件协议的同源策略限制极为严格，html2canvas需要读取页面中的图片资源完成渲染，本地图片资源被判定为跨域资源，触发CORS拦截，所以抛出Error loading image错误。
• 加载了跨域资源的canvas会被浏览器标记为「受污染的画布」，此时调用canvas.toDataURL()方法会触发安全限制，抛出The operation is insecure的DOM异常。
• 你的代码没有给html2canvas()返回的Promise添加catch捕获异常，所以会出现未捕获的Promise异常提示。

1. 优先推荐方案：不要直接打开本地HTML文件运行，搭建本地HTTP服务访问页面
   可以用Node.js的http-server、Python自带的http.server、或者IDE自带的预览服务启动本地服务，通过http://localhost:端口的形式访问页面，此时同源策略限制会放宽，本地静态资源不会被判定为跨域。
2. 给html2canvas添加跨域配置，同时捕获Promise异常：
   调用的时候添加跨域相关配置项，示例代码如下：

html2canvas(document.body, {
  useCORS: true, // 允许加载跨域图片
  allowTaint: false // 禁止跨域资源污染画布
}).then(canvas => {
  const base64Image = canvas.toDataURL('image/jpeg', 1);
  try {
    localStorage.setItem("img1", base64Image);
  }
  catch (e) {
    console.log("Storage failed: " + e);
  }
}).catch(err => {
  // 捕获异常避免控制台抛未捕获错误
  console.log('html2canvas执行出错：', err)
})
return false;

3. 仅开发调试场景可用：如果必须直接通过file协议运行，可以调整浏览器启动参数降低安全限制：

• Windows：右键Chrome快捷方式，选择「属性」>「目标」，在原有路径末尾添加 --allow-file-access-from-files（注意前面留一个空格），保存后重启浏览器即可。
• Mac：终端执行命令open /Applications/Google\ Chrome.app --args --allow-file-access-from-files启动浏览器即可。

4. 额外注意：localStorage通常只有5MB的存储上限，截图生成的base64格式图片体积很大，很容易超出容量上限导致存储失败，不建议用localStorage存储大体积截图。

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