前端Canvas绘制图片跨域问题解决

 function imageUrlToBase64() {
            // 一定要设置为let，不然图片不显示
            const image = new Image();

            // 解决跨域问题
            image.setAttribute('crossOrigin', 'anonymous');

            const imageUrl = 'http://ip:8081/baseImagePath/appUserHospital/1629846662824.jpeg';
            image.src = imageUrl;

            const that = this;
            // image.onload为异步加载
            image.onload = () => {
                const canvas = document.createElement('canvas');
                canvas.width = image.width;
                canvas.height = image.height;
                const context = canvas.getContext('2d');
                context.drawImage(image, 0, 0, image.width, image.height);

                const quality = 0.8;
                // 这里的dataurl就是base64类型
                const dataURL = canvas.toDataURL('image/jpeg', quality); //
                console.log('打打', dataURL);
            };
        }