Canvas는 프런트엔드 이미지 다운로드를 구현합니다.

문제 설명: 프런트 엔드에서 사진을 다운로드하는 방법은 두 가지가 있습니다.
1. a 태그를 통해 직접 열 수 있습니다. 동일한 도메인 이름으로 직접 다운로드할 수 있으며, 다른 도메인 이름으로 새 탭 페이지가 열립니다. 프로젝트의 이미지는 별도로 저장되는 경우가 많으며 많은 이미지가 동일한 도메인 이름에 속하지 않습니다. 아래 두 번째 방법을 사용하십시오.
2. 캔버스 태그를 통해 다운로드하면 코드는 다음과 같습니다.

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