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