精选
乡关何处
2022-11-25 11:43:35
这两天遇到一个需求就是实现图片动态下载功能,调用后端接口,返回一个图片路径,然后将图片下载到本地,在此分享一下这个做法。
//点击事件,请求接口
handleCode(row) {
merStoreCode(row.mer_id)
.then((res) => {
this.downloadByBlob(res.data.code, row.mer_name);
})
.catch((res) => {
this.$message.error(res.message);
});
},
downloadByBlob(url, name) {
//第一个参数是图片链接,第二个参数是图片名称
let image = new Image();
image.setAttribute('crossOrigin', 'anonymous');
image.src = url;
image.onload = () => {
let canvas = document.createElement('canvas');
canvas.width = image.width;
canvas.height = image.height;
let ctx = canvas.getContext('2d');
ctx.drawImage(image, 0, 0, image.width, image.height);
canvas.toBlob((blob) => {
let url = URL.createObjectURL(blob);
this.download(url, name);
// 用完释放URL对象
URL.revokeObjectURL(url);
});
};
},
download(href, name) {
let eleLink = document.createElement('a');
eleLink.download = name;
eleLink.href = href;
eleLink.click();
eleLink.remove();
},
徐斗明 最后编辑于2023-09-13 16:55:51
快捷回复
{{item.user_info.nickname ? item.user_info.nickname : item.user_name}}
作者 管理员 企业
{{itemf.name}}
{{itemc.user_info.nickname}}
{{itemc.user_name}}
回复 {{itemc.comment_user_info.nickname}}
{{itemf.name}}