How to convert a locally stored image to base64?

Question

I have an image path which it is stored locally. For example,

let path = 'C:\Users\Jonnie\Desktop'

How do I get the image by using JavaScript only and convert it to base64?

Answer 1

function imageToBase64(img)
{
    var canvas, ctx, dataURL, base64;
    canvas = document.createElement("canvas");
    ctx = canvas.getContext("2d");
    canvas.width = img.width;
    canvas.height = img.height;
    ctx.drawImage(img, 0, 0);
    dataURL = canvas.toDataURL("image/png");
    base64 = dataURL.replace(/^data:image\/png;base64,/, "");
    return base64;
}

source

Now you just need to pass your image to there

Answer 2

You can use <canvas> for this.

Create a canvas and load in the image then use toDataURL() to get it in base64

The documentation for <canvas> can be found here