Javascript Konvertieren einer URL zu einem Base64 Image

Question

Ich versuche, eine Image-URL in ein Base64-Bild zu konvertieren. Ich habe this gefunden, die ich versuche zu verwenden.

Ich habe den folgenden Code:

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

und

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,/, ""); 
} 

Aber es gibt die folgenden:

data:,

Ich erhalte die folgende Fehlermeldung in der Konsole:

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.

Mein Code muss ich incorrect. Kann jemand bitte beraten, wie man die URL in ein base64 Bild umwandelt?

Dank

UPDATE

ich die folgende Zeile in der Funktion aded:

img.crossOrigin = "Anonymous"; 

Das von dem Fehler losgeworden, nun aber, bekomme ich folgendes:

data:,

Answer 1

Sie können ein XHR und die Fil e Reader API, die sauberer ist, aber in browser compatibility begrenzt ist.

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