how to convert an image into base 64 in angular5?

Question

how to convert an image into base 64 in angular5 ? the image is an url gotten from facebook or google authentification api.

what have i done wrong ?

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

// Usage

    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 Error: Uncaught (in promise): TypeError: Cannot read property 'width' of undefined TypeError: Cannot read property 'width' of undefined

score 0 · Answer 1 · answered Apr 19 '18 at 07:54

0

If you have the Image as File, you can easily convert it to base64 by using a FileReader:

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;
    };
}

answered Apr 19 '18 at 07:54

Marv

748
11
27

Hey i have the image as an url – Firas Chebbah Apr 19 '18 at 08:15
Then you will have to request it from the URL before you can save its base64 string – Marv Apr 19 '18 at 08:21
sorry by how can i do it ? – Firas Chebbah Apr 19 '18 at 08:37
This might help you: https://stackoverflow.com/questions/18417691/fetching-image-from-url-with-javascript?lq=1 – Marv Apr 19 '18 at 08:50

how to convert an image into base 64 in angular5?

1 Answers1