Javascript将URL转换为base64图像

我正在尝试将图像url转换为base64图像。我已经找到了我想要利用的东西

我有以下代码：

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

及

但是，它输出以下内容：

数据：

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

异常：未捕获（承诺中）：安全性错误：未能对“HtmlCanvaElement”执行“toDataURL”：可能无法导出受污染的画布。 错误：未能对“HTMLCanvasElement”执行“toDataURL”：可能无法导出受污染的画布

我的代码必须使我无法识别。有谁能建议如何将url转换为base64图像

谢谢

更新

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

img.crossOrigin = "Anonymous";

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

数据：

---

您可以改用XHR和文件读取器API，这是一种更干净的API，但在某些方面受到限制

---

查看您在控制台上收到的错误消息-错误：未能在“HTMLCanvasElement”上执行“toDataURL”：可能无法导出受污染的画布。已添加错误消息。感谢您指出这一点。您将此标记为重复，它重复了哪个问题？问题顶部的黄色大框中提到的问题昆汀，我通过设置“crossOrigin”、“anonymous”解决了错误消息，请参见上面的更新。非常感谢。然而，它仍然不能解决我的问题，我正在尝试创建Base64图像。我正在构建一个Ionic移动应用程序。它能在那种环境下工作吗？这是否意味着它不能在IE10和Safari 6中工作？@Richard不幸的是，我不熟悉这个框架。@Richard说它能在IE 10和Safari 6中工作好的，无论如何，谢谢，我想我需要寻找另一个解决方案。希望你的解决方案能帮助其他人。

img.crossOrigin = "Anonymous";

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