canvas实现前端图片下载

问题描述：前端下载图片可以使用一下两种方式
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);
            };
        });
    }