What is the process for converting an image into base 64 using Angular 5?

Question

What is the process for converting an image into base 64 using Angular 5?

Is there a way to convert an image into base 64 using angular5 when the image is sourced from Facebook or Google authentication API?

I seem to be encountering an issue, what could I be doing 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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2d594841484e42400046401500001b1f1c55191c196d61445b486044435903677d6a">[email protected]</a>";

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

typescript ionic-framework ionic3

Answer 1

Answer №1

Converting an Image to base64 is a simple process if you have the image stored as a File. One way to achieve this is by using a FileReader in JavaScript:

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

Answer 2

Converting an Image to base64 is a simple process if you have the image stored as a File. One way to achieve this is by using a FileReader in JavaScript:

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

What is the process for converting an image into base 64 using Angular 5?

Answer №1

Similar questions

Tips for achieving asynchronous data retrieval using Angular Observable inside another Observable

Show blank value if there are no search results, along with an additional menu option

How to Remove onFocus Warning in React TypeScript with Clear Input Type="number" and Start without a Default Value

Error message indicating that the function is not defined within a custom class method

Issue with the gulp-babel plugin: Files within the Plugin/Preset should only export functions, not objects

Contrary to GraphQLNonNull

The design of Next.js takes the spotlight away from the actual content on the

Utilize Typescript to aim for the most recent edition of EcmaScript

Centralize all form statuses in a single component, conveniently organized into separate tabs

The error message indicated that a Promise<string> was expected, but instead a Promise<string|number> was received

What is the best way to access automatically generated JavaScript variables in TypeScript?

Guidance on incorporating a function as a prop in React using TypeScript

The specified type 'IterableIterator<number>' does not belong to either an array type or a string type

Set the values retrieved from the http get response as variables in an Angular application

The process of converting a video URI to a blob is encountering difficulties when using the Ionic framework on iOS devices

Expanding Material UI functionality across various packages within a monorepository

Is there a way to prevent the splash screen from appearing every time I navigate using a navbar link in a single page application (SPA)?

The factory in Ionic does not support the usage of http.get command

Transform a string into an array using Angular 2 and TypeScript

importing files from Uploadcare using ngCordova MediaFile