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);

},

相关推荐
IT成长日记1 小时前
【Nginx开荒攻略】Nginx虚拟主机配置:从域名、端口到IP的完整指南
linux·运维·服务器·nginx·虚拟主机
瓯雅爱分享2 小时前
Java+Vue构建的采购招投标一体化管理系统,集成招标计划、投标审核、在线竞价、中标公示及合同跟踪功能,附完整源码,助力企业实现采购全流程自动化与规范化
java·mysql·vue·软件工程·源代码管理
光影少年2 小时前
angular生态及学习路线
前端·学习·angular.js
迎風吹頭髮3 小时前
UNIX下C语言编程与实践53-UNIX 共享内存控制:shmctl 函数与共享内存管理
服务器·c语言·unix
黑马金牌编程3 小时前
Linux 服务器常见的性能调优
linux·运维·服务器·性能优化
无尽夏_4 小时前
HTML5(前端基础)
前端·html·html5
Jagger_4 小时前
敏捷开发流程-精简版
前端·后端
mit6.8244 小时前
[C# starter-kit] 命令/查询职责分离CQRS | MediatR |
java·数据库·c#
liuyao_xianhui4 小时前
Linux_基本指令1
linux·运维·服务器
FIN66685 小时前
昂瑞微冲刺科创板:创新驱动,引领射频芯片国产化新征程
前端·安全·前端框架·信息与通信·芯片