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