解决将网络图片转成base64格式报跨域的问题

此前开发了一个前端生成海报的功能。但是由于海报的图片是网络路径的图片。所以在生成海报前需要把网络图片转成base64格式。
但是在转的途中。。发现，报跨域了。。。然后百度了一大堆看似靠谱的方法。

                let that = this
                let image = new Image();  
                image.src = 'xxx'; 
                console.log(image)
                image.onload = function(){  
                  let base64 = that.getBase64Image(image);  
                  console.log(base64);  
                } 
     getBase64Image(img) {
                 let canvas = document.createElement("canvas");  
                 canvas.width = img.width;  
                 canvas.height = img.height;  
                 let ctx = canvas.getContext("2d");  
                 ctx.drawImage(img, 0, 0, img.width, img.height);  
                 let ext = img.src.substring(img.src.lastIndexOf(".")+1).toLowerCase();  
                 let dataURL = canvas.toDataURL("image/"+ext);  
                 return dataURL;  
            }

本来以为行了。然后打开控制台一看。canvas在转base64的时候跨域了。

Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported

百度了一下说给图片添加一个crossOrigin='Anonymous'就可以解决跨域。

   let that = this
                let image = new Image();  
                image.src = 'xxx'; 
                console.log(image)
                image.crossOrigin='Anonymous'
                image.onload = function(){  
                  let base64 = that.getBase64Image(image);  
                  console.log(base64);  
                } 
     getBase64Image(img) {
                 let canvas = document.createElement("canvas");  
                 canvas.width = img.width;  
                 canvas.height = img.height;  
                 let ctx = canvas.getContext("2d");  
                 ctx.drawImage(img, 0, 0, img.width, img.height);  
                 let ext = img.src.substring(img.src.lastIndexOf(".")+1).toLowerCase();  
                 let dataURL = canvas.toDataURL("image/"+ext);  
                 return dataURL;  
            }

但是加上后发现依旧是跨域。这下就头疼了。

后面偶然一次瞎操作，把crossOrigin='Anonymous'给提到了赋值src的前面。
也就是

                let image = new Image();  
                image.crossOrigin='Anonymous'
                image.src = 'http://group.app65.cn/upload/admin/20210413/66826bc7adbc3c595c9b169d955cc3e9.png'; 
                console.log(image)
                image.onload = function(){  
                  let base64 = that.getBase64Image(image);  
                  console.log(base64);  
                } 

结果竟然成功了。。。。。

附：如果服务端没有给图片设置请求头里的Access-C...A...O...字段的值为*或者你当前的域名。就算前端搞了这个跨域的玩意儿上去，依旧是拿不到图片的。