js两种获取远程图片的base64编码功能

注意跨域问题

function getImgBase64FromUrlByDom(url: string = '') {
    return new Promise((resolve: any, reject: any) => {
        if (url) {
            let img: any = new Image();
            img.crossOrigin = '';
            img.src = url;
            // img.crossOrigin = 'Anonymous';
            img.setAttribute('crossOrigin', 'Anonymous');
            img.onload = () => {
                let canvas: any = document.createElement('canvas');
                canvas.width = img.width;
                canvas.height = img.height;

                canvas
                    .getContext('2d')
                    ?.drawImage(img, 0, 0, img.width, img.height);

                const dataURL = canvas.toDataURL(
                    'image/' +
                        img.src
                            .substring(img.src.lastIndexOf('.') + 1)
                            .toLowerCase()
                );

                img = null;
                canvas = null;
                resolve(dataURL);
            };
        } else {
            reject();
        }
    });
}

function getImgBase64FromUrlByXhr(url: any) {
    return new Promise((resolve: any, reject: any) => {
        if (url) {
            let xhr: any = new XMLHttpRequest();
            xhr.open('get', url, true);
            xhr.responseType = 'blob';
            xhr.onload = () => {
                if (xhr.status == 200) {
                    let oFileReader: any = new FileReader();
                    oFileReader.readAsDataURL(xhr.response);
                    oFileReader.onloadend = (e: any) => {
                        oFileReader = null;
                        xhr = null;
                        resolve(e.target.result);
                    };
                }
            };
            xhr.send();
        } else {
            reject();
        }
    });
}
getImgBase64FromUrlByXhr('http://localhost:909/assets/img/asailogo.png').then(
    (res: any) => {
        console.log(666.1001, res.length, res);
    }
);