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'