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

},

相关推荐
lcc1871 小时前
Vue mixin混入
前端·vue.js
t***L2661 小时前
终于搞定了!Vue项目打包后白屏问题
前端·javascript·vue.js
u***j3241 小时前
前端组件通信方式,Vue与React对比
前端·vue.js·react.js
小贺要学前端1 小时前
【无标题】
前端·javascript·vue·技术趋势
im_AMBER1 小时前
React 18 用 State 响应输入
前端·react.js·前端框架
Tony_yitao1 小时前
9.华为OD机试真题 - 最长的顺子 - 2024E卷 Java
java·华为od·algorithm
前端摸鱼匠1 小时前
Vue 3 的全局组件注册:讲解如何全局注册组件
前端·javascript·vue.js·前端框架·node.js·ecmascript
毕设源码-赖学姐2 小时前
【开题答辩全过程】以 非凡物流公司电商物流管理系统的设计与实现为例,包含答辩的问题和答案
java·eclipse
lcc1873 小时前
Vue VueComponent
前端·vue.js
菠菠萝宝3 小时前
【Java手搓RAGFlow】-3- 用户认证与权限管理
java·开发语言·人工智能·llm·openai·qwen·rag