前端使用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'