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

},

相关推荐
风象南21 分钟前
SpringBoot中6种自定义starter开发方法
java·spring boot·后端
好_快21 分钟前
Lodash源码阅读-memoizeCapped
前端·javascript·源码阅读
好_快22 分钟前
Lodash源码阅读-toString
前端·javascript·源码阅读
好_快23 分钟前
Lodash源码阅读-memoize
前端·javascript·源码阅读
excel36 分钟前
webpack 核心编译器 十四 节
前端
excel43 分钟前
webpack 核心编译器 十三 节
前端
腾讯TNTWeb前端团队8 小时前
helux v5 发布了,像pinia一样优雅地管理你的react状态吧
前端·javascript·react.js
mghio9 小时前
Dubbo 中的集群容错
java·微服务·dubbo
范文杰11 小时前
AI 时代如何更高效开发前端组件?21st.dev 给了一种答案
前端·ai编程