vue前端根据接口返回的url 下载图片

downloadPicture(imgSrc, name) {

const image = new Image();

// 解决跨域 Canvas 污染问题

image.setAttribute("crossOrigin", "anonymous");

image.src = imgSrc;

image.onload = () => {

const canvas = document.createElement("canvas");

canvas.width = image.width;

canvas.height = image.height;

const context = canvas.getContext("2d");

context.drawImage(image, 0, 0, image.width, image.height);

canvas.toBlob((blob) => {

const url = URL.createObjectURL(blob);

const a = document.createElement("a");

a.download = name || "photo";

a.href = url;

a.click();

a.remove();

URL.revokeObjectURL(url);

});

};

},

downLineFlow(row) {

this.downloadPicture(row.signatureUrl, row.username);

},

相关推荐
晴子呀2 分钟前
Spring底层原理大致脉络
java·后端·spring
只吹45°风8 分钟前
Java-ArrayList和LinkedList区别
java·arraylist·linkedlist·区别
卡兰芙的微笑10 分钟前
get_property --Cmakelist之中
前端·数据库·编辑器
覆水难收呀12 分钟前
三、(JS)JS中常见的表单事件
开发语言·前端·javascript
阿华的代码王国16 分钟前
【JavaEE】多线程编程引入——认识Thread类
java·开发语言·数据结构·mysql·java-ee
黑蛋同志16 分钟前
array和linked list的区别
java
猿来如此呀19 分钟前
运行npm install 时,卡在sill idealTree buildDeps没有反应
前端·npm·node.js
繁依Fanyi22 分钟前
828 华为云征文|华为 Flexus 云服务器部署 RustDesk Server,打造自己的远程桌面服务器
运维·服务器·开发语言·人工智能·pytorch·华为·华为云
andrew_121922 分钟前
腾讯 IEG 游戏前沿技术 一面复盘
java·redis·sql·面试
shuxianshrng24 分钟前
鹰眼降尘系统怎么样
大数据·服务器·人工智能·数码相机·物联网