Javascript URLをBase64イメージに変換する

Question

イメージURLをbase64イメージに変換しようとしています。私は使用しようとしているthisを見つけました。

I次のコードを持っている：

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:,

I取得コンソールに次のエラー：

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イメージにURLを変換する方法を助言してもらえますか？

おかげ

UPDATE

は、私は、関数に次の行aded：

：

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();