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

},

相关推荐
隐退山林几秒前
JavaEE初阶:多线程进阶
java·开发语言
柏木乃一1 分钟前
进程间通信IPC(1)IPC概述,匿名管道,进程池
linux·服务器·c++·进程间通信·ipc·匿名管道·进程池
JMchen1232 分钟前
Android剪切板工具类ClipBoardUtil:简化剪切板操作
android·java·移动开发·android studio
利刃大大6 分钟前
【Vue】props完整语法 && 非父子组件通信 && provide && inject && eventBus
前端·javascript·vue.js
萧曵 丶9 分钟前
前端工程化项目中全类型配置文件的详细解析
前端·javascript·配置文件·工程化
蒹葭玉树12 分钟前
【C++上岸】C++常见面试题目--操作系统篇(第二十七期)
java·c++·面试
GHL28427109012 分钟前
TeamTalk-login_server学习
运维·服务器·c++·学习
讯方洋哥15 分钟前
HarmonyOS App开发——鸿蒙公共事件App开发
服务器·前端·javascript
Можно19 分钟前
吃透 Vue 的 v - 指令家族:从入门到精通
前端·javascript·vue.js
蜂蜜黄油呀土豆19 分钟前
深入解析Java虚拟机垃圾回收机制
java·jvm·cms·垃圾回收·g1