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

},

相关推荐
老秦包你会1 分钟前
Linux课程五课---Linux进程认识1
linux·运维·服务器
浩宇软件开发3 分钟前
Android开发,实现一个简约又好看的登录页
android·java·android studio·android开发
brzhang3 分钟前
告别『上线裸奔』!一文带你配齐生产级 Web 应用的 10 大核心组件
前端·后端·架构
程序员Bears3 分钟前
深入理解CSS3:Flex/Grid布局、动画与媒体查询实战指南
前端·css3·媒体·visual studio code
南客先生10 分钟前
多级缓存架构设计与实践经验
java·面试·多级缓存·缓存架构
anqi2712 分钟前
如何在 IntelliJ IDEA 中编写 Speak 程序
java·大数据·开发语言·spark·intellij-idea
等猪的风15 分钟前
openwrt作旁路由时的几个常见问题 openwrt作为旁路由配置zerotier 图文讲解
运维·服务器·网络
David凉宸15 分钟前
凉宸推荐给大家的一些开源项目
前端
袋鱼不重17 分钟前
Cursor 最简易上手体验:谷歌浏览器插件开发3s搞定!
前端·后端·cursor
hyyyyy!17 分钟前
《从分遗产说起:JS 原型与继承详解》
前端·javascript·原型模式