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 分钟前
Burp Suite插件用于自动检测Web应用程序中的未授权访问漏洞
前端
宴之敖者、22 分钟前
Linux——\r,\n和缓冲区
linux·运维·服务器
LuDvei23 分钟前
LINUX错误提示函数
linux·运维·服务器
测试开发Kevin27 分钟前
小tip:换行符CRLF 和 LF 的区别以及二者在实际项目中的影响
java·开发语言·python
笨手笨脚の29 分钟前
Redis: Thread limit exceeded replacing blocked worker
java·redis·forkjoin·thread limit
未来可期LJ30 分钟前
【Linux 系统】进程间的通信方式
linux·服务器
心理之旅41 分钟前
高校文献检索系统
运维·服务器·容器
Lenyiin44 分钟前
Linux 基础IO
java·linux·服务器
The Chosen One9851 小时前
【Linux】深入理解Linux进程(一):PCB结构、Fork创建与状态切换详解
linux·运维·服务器
松☆1 小时前
Dart 核心语法精讲:从空安全到流程控制(3)
android·java·开发语言