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

},

相关推荐
pas1364 分钟前
37-mini-vue 解析插值
前端·javascript·vue.js
开发者小天4 分钟前
python中For Loop的用法
java·服务器·python
flushmeteor9 分钟前
JDK源码-基础类-String
java·开发语言
毕设源码-钟学长13 分钟前
【开题答辩全过程】以 基于ssm的空中停车场管理系统为例,包含答辩的问题和答案
java
绾樘14 分钟前
RHCE--基于Nginx的Web服务器配置
运维·服务器·nginx
生活很暖很治愈30 分钟前
Linux基础开发工具
linux·服务器·git·vim
不愿是过客1 小时前
java实战干货——长方法深递归
java
十里-1 小时前
vue.js 2前端开发的项目通过electron打包成exe
前端·vue.js·electron
雨季6662 小时前
构建 OpenHarmony 简易文字行数统计器:用字符串分割实现纯文本结构感知
开发语言·前端·javascript·flutter·ui·dart
小北方城市网2 小时前
Redis 分布式锁高可用实现:从原理到生产级落地
java·前端·javascript·spring boot·redis·分布式·wpf