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

},

相关推荐
汽车仪器仪表相关领域几秒前
Kvaser U100:工业级单通道CAN/CAN FD转USB接口,恶劣环境下的可靠通信桥梁
linux·运维·服务器·人工智能·功能测试·单元测试·可用性测试
IT_陈寒4 分钟前
JavaScript性能优化完全指南
前端·人工智能·后端
xyyaihxl4 分钟前
springboot系列--自动配置原理
java·spring boot·后端
weyyhdke5 分钟前
Java进阶-在Ubuntu上部署SpringBoot应用
java·spring boot·ubuntu
上海云盾-小余6 分钟前
游戏账号盗刷、数据篡改防护全攻略:前端加密 + 后端 WAF 双重加固
前端·游戏
javaDocker9 分钟前
沉浸式AI编程:IDEA + Claude Code 的终极方案
java·intellij-idea·ai编程
两年半的个人练习生^_^10 分钟前
每日一学:设计模式之代理模式
java·设计模式·代理模式
看我眼色行事^ \/ ^10 分钟前
完整操作指南
服务器·学习
Cobyte13 分钟前
7.响应式系统比对:手写一个响应式状态库并应用在 React 上
前端·javascript·vue.js
深海鱼在掘金14 分钟前
2026年前端开发工程师转型AI Agent开发工程师全指南
前端·人工智能