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 分钟前
vue2、vue3父子组件嵌套生命周期执行顺序
前端·vue.js
2501_940943913 分钟前
体系课\ Python Web全栈工程师
开发语言·前端·python
q***06473 分钟前
SpringSecurity相关jar包的介绍
android·前端·后端
低保和光头哪个先来9 分钟前
场景2:Vue Router 中 query 与 params 的区别
前端·javascript·vue.js·前端框架
rafael(一只小鱼)11 分钟前
AI运维开发平台学习
java·开发语言
Protein_zmm19 分钟前
第一章 计算机网络和因特网(下)
服务器·计算机网络·php
空空kkk22 分钟前
SpringMVC——IO笔记
java·io
q***952223 分钟前
SpringMVC 请求参数接收
前端·javascript·算法
|晴 天|25 分钟前
Vite 为何能取代 Webpack?新一代构建工具的崛起
前端·webpack·node.js
带只拖鞋去流浪29 分钟前
迎接2026,重新认识Webpack5
前端·webpack