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

但是，它会输出以下内容：

数据：，

我在控制台中收到以下错误：

异常：未捕获（承诺）：SecurityError：无法在“HTMLCanvasElement”上执行“toDataURL”：可能无法导出受污染的画布。 错误：无法在“HTMLCanvasElement”上执行“toDataURL”：可能无法导出受污染的画布。

我的代码必须不正确。谁能告诉我如何将 url 转换为 base64 图像？

谢谢

更新

我在函数中添加了以下行：

img.crossOrigin = "Anonymous";

这消除了错误，但是，现在我得到以下信息：

数据：，

Answer 1

您可以改用 XHR 和 File 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();