如何将图像转换为角度 5 的 base64？

Question

如何将图像转换为 angular5 中的 base 64 ？ 图片是从 facebook 或 google authentification api 获取的 url。

我做错了什么？

   getBase64Image(img) {
var canvas = document.createElement("canvas");
canvas.width = img.src.width;
canvas.height = img.src.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,/, "");
}

// 用法

    var url=" https://www.livemint.com/rf/Image-621x414/LiveMint/Period2/2017/06/12/Photos/Opinion/telecom-km8--621x414@LiveMint.JPG";


var base64 = this.getBase64Image(url);

//错误

ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'width' of undefined TypeError: Cannot read property 'width' of undefined

Answer 1

如果您的图像为File，您可以使用 FileReader 轻松地将其转换为 base64：

convert(file: File): string {
    const reader: FileReader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = (): void => {
        const base64String: string = (reader.result as string).match(
            /.+;base64,(.+)/
        )[1];
        return base64String;
    };
}