Js实现下载图片
场景
服务器接口返回一个图片的远程地址，要求前端进行下载
实现方案
前端接口拿到图片通过canvas转成base64的格式，然后利用A标签的download属性 进行下载，具体请看代码
ps:如果是同源域名下面的话。其实直接操作a标签的href即可，下面展示的方法是跨域的实现
dom元素
var ctx = canvas.getContext("2d");
var img = new Image;
img.crossOrigin = 'Anonymous'; // 支持跨域
img.src = url;
img.onload = function () {
canvas.height = img.height; //指定画板的高度,自定义
canvas.width = img.width; //指定画板的宽度，自定义
ctx.drawImage(img, 0,0); //参数可自定义
var dataURL = canvas.toDataURL("image/" + ext); // 传递的自定义的参数
callback.call(this, dataURL); //回掉函数获取Base64编码
canvas = null;
};
}
let path = 'https://static-xesapi.speiyou.cn/1561014844679.jpg'
let all = document.querySelector('a')
getUrlBase64(path,function (base64) {
all.setAttribute('href',base64)
});" title="" data-original-title="复制">
// <a href="" download>下载</a>
function getUrlBase64(url,callback ,ext = '') {
var canvas = document.createElement("canvas"); //创建canvas DOM元素
var ctx = canvas.getContext("2d");
var img = new Image;
img.crossOrigin = 'Anonymous'; // 支持跨域
img.src = url;
img.onload = function () {
canvas.height = img.height; //指定画板的高度,自定义
canvas.width = img.width; //指定画板的宽度，自定义
ctx.drawImage(img, 0,0); //参数可自定义
var dataURL = canvas.toDataURL("image/" + ext); // 传递的自定义的参数
callback.call(this, dataURL); //回掉函数获取Base64编码
canvas = null;
};
}
let path = 'https://static-xesapi.speiyou.cn/1561014844679.jpg'
let all = document.querySelector('a')
getUrlBase64(path,function (base64) {
all.setAttribute('href',base64)
});兼容性
本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！
