Javascript將URL轉換爲base64圖像

Question

我試圖將圖像url轉換爲base64圖像。我發現this，我正在嘗試使用。

我有以下代碼：

var imgUrl = 'https://www.google.de/images/srpr/logo11w.png'; 
let base64image = this.getBase64Image(imgUrl); 
console.log(base64image); 

和

public getBase64Image(imgUrl) { 
    var img = new Image(); 
    img.src = imgUrl; 
    var canvas = document.createElement("canvas"); 
    canvas.width = img.width; 
    canvas.height = img.height; 
    var ctx = canvas.getContext("2d"); 
    ctx.drawImage(img, 0, 0); 
    var dataURL = canvas.toDataURL("image/png"); 
    return dataURL.replace(/^data:image\/(png|jpg);base64,/, ""); 
} 

但是，它輸出以下：

data:,

我在控制檯中出現以下錯誤：

EXCEPTION: Uncaught (in promise): SecurityError: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported. Error: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.

我的代碼必須是我的代碼。任何人都可以請建議如何將網址轉換爲base64圖像？

感謝

UPDATE

我交鋒以下行功能：

img.crossOrigin = "Anonymous"; 

這擺脫了錯誤的，但是，現在我得到如下：

data:,

Answer 1

您可以使用XHR和Fil e Reader API代替，它更簡潔，但限於browser compatibility。

var imgxhr = new XMLHttpRequest(); 
    imgxhr.open("GET", url); 
    imgxhr.responseType = "blob"; 
    imgxhr.onload = function(){ 
     if (imgxhr.status===200){ 
      reader.readAsDataURL(imgxhr.response); 
     } 
     else if (imgxhr.status===404){ 
      // Error handle 
     } 
    }; 
var reader = new FileReader(); 
    reader.onloadend = function() { 
     console.log(reader.result.length); 
     // Code here 
    }; 
imgxhr.send();