问题描述:前端下载图片可以使用一下两种方式
1、通过a标签直接打开,同域名下可以直接下载,不同域名下会打开新的标签页。项目中图片往往都是单独存储,很多不在同一个域名下。就用到下面第二种方式
2、通过canvas标签下载,代码如下:
//data为图片URL
downloadClickHandler(data:any){
if (!data) {
return;
}
this.getUrlBase64(data).then((base64: any) => {
let a:any = document.createElement('a');
a.style.display = 'none';
a.download = name;
a.href = base64;
document.body.appendChild(a);
a.click();
});
}
getUrlBase64(url: any) {
return new Promise((resolve) => {
let canvas: any = document.createElement('canvas');
let ctx = canvas.getContext('2d');
let img = new Image();
img.crossOrigin = 'Anonymous'; //允许跨域
img.src = url;
img.onload = function () {
canvas.height = img.height;
canvas.width = img.width;
ctx && ctx.drawImage(img, 0, 0, img.width, img.height);
let dataURL = canvas.toDataURL('image/png');
canvas = null;
resolve(dataURL);
};
});
}