利用html2canvas直接在前端实现截图下载(解决跨域的问题)
要实现前端跨域下载 前提是你需要访问的图片服务器 已经在HTTP响应标头中添加了 Access-Control-Allow-Origin * ,否则怎么下载都是一张空白图!
html2canvas下载
html2canvas官网
或者直接使用npm命令导入
npm install --save html2canvas
html2canvas使用
js方法可以直接复制
function downLoadImg() {
var img = document.getElementById('img3D'); // 获取要下载的图片
var imgsrc = img.src;
var name = imgsrc.substring(imgsrc.lastIndexOf('\/') + 1, imgsrc.length-4);
html2canvas(img, {
width: img.clientWidth,
height: img.clientHeight,
allowTaint: false,
useCORS: true,//允许跨域
}).then(canvas => {
let src = canvas.toDataURL('image/png', 1)
let image = new Image()
image.src = src
let url = image.src.replace(/^data:image\/[^;]/, 'data:application/octet-stream')//输出类型
let a = document.createElement('a');//随便创建一个元素
a.download = `${name}.png`// 设置下载的文件名,默认是'下载'
a.href = url
document.body.appendChild(a)
a.click()
a.remove() // 下载之后把创建的元素删除
});
}
标签 (这里的)crossorigin="anonymous"也需要添加来允许跨域
<img id="img3D" src="" crossorigin="anonymous"/>
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步