此前開發(fā)了一個前端生成海報的功能。但是由于海報的圖片是網(wǎng)絡(luò)路徑的圖片。所以在生成海報前需要把網(wǎng)絡(luò)圖片轉(zhuǎn)成base64格式。
但是在轉(zhuǎn)的途中。。發(fā)現(xiàn)，報跨域了。。。然后百度了一大堆看似靠譜的方法。

                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在轉(zhuǎn)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;  
            }

但是加上后發(fā)現(xiàn)依舊是跨域。這下就頭疼了。

后面偶然一次瞎操作，把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);  
                } 

結(jié)果竟然成功了。。。。。

附：如果服務(wù)端沒有給圖片設(shè)置請求頭里的Access-C...A...O...字段的值為*或者你當(dāng)前的域名。就算前端搞了這個跨域的玩意兒上去，依舊是拿不到圖片的。