前端使用html2canvas在页面截图并导出，以及截图中含有图片时的跨域问题解决

1.引入html2canvas

npm 安装或cdn引入

npm install html2canvas 

<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>

2.使用 html2canvas

// 假设你有一个 id 为 "capture" 的元素  
html2canvas(document.querySelector("#capture")).then(canvas => {  
    // canvas 是转换后的 canvas 元素  
    // 你可以将 canvas 转换为图片，然后添加到 DOM 中  
    document.body.appendChild(canvas);  
  
    // 或者，将 canvas 转换为图片 URL 并显示在 img 元素中  
    var image = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");  
    var link = document.createElement('a');  
    link.download = 'screenshot.png';  
    link.href = image;  
    link.click();  
});

3.图片跨域时的解决方法

1.服务器CORS配置：

** **图片所在服务器设置

Access-Control-Allow-Origin: *

或

Access-Control-Allow-Origin: 你的域名 

的头部。

    注意，出于安全考虑，许多服务器默认不允许跨域请求。

2.设置开发服务器代理，以vue项目为例：

** 在vue.config.js中配置**

// vue.config.js  
module.exports = {  
  devServer: {  
    proxy: {  
     '/file': {  
        target: 'http://155.60.114.72:88545'//图片所在地址,  
        changeOrigin: true,  
        pathRewrite: {  
          '^/file': ''  
        }  
      }  
    }  
  }  
}

    在你的Vue组件中，你应该将图片URL更改为通过代理访问的URL

let img = '/file/7df46603b38d49af94cefb4c92d5cd27.jpg'