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

},

相关推荐
a1117767 分钟前
家居生成器 Cartoon 开源项目 3D web
前端·开源
小林ixn14 分钟前
前端卡顿终结者:用 useRef 把 Web Worker 请进 React 项目
前端·react.js·前端框架
sunly_14 分钟前
React 三个重要概念:Ref、Props、State 详解
前端·javascript·react.js
weixin_4316004415 分钟前
前端对接 SSE 的两种常见方式
前端·后端·学习·ai·sse·nest.js
Mh21 分钟前
如何使用GSAP实现一个 `pinned` 滚动楼层叙事?
前端·javascript·css
·薯条大王9 小时前
经济实惠玩云服务器|一台云服务器多人共用,子账号配置教程
java·linux·运维·服务器·汇编·c++·python
用户938515635079 小时前
从零在浏览器里跑 DeepSeek-R1:WebGPU + Transformer.js 全链路实战
前端·设计模式·typescript
CodeSheep9 小时前
稚晖君公司人事大变动,来了!
前端·后端·程序员
鱼樱前端10 小时前
用 AI 做内容变收入
前端·人工智能·ai编程
浮生望10 小时前
React + TypeScript 组件设计进阶:从类型约束到无状态组件的三次进化
前端