How to get base64 encoded data from html image

Question

I have a registration form where users can choose an avatar. They have 2 possibilities:

Choose a default avatar
Upload their own avatar

In my HTML page I have this.

<img id="preview" src="img/default_1.png">

It displays the chosen avatar. I use the File Api to let users upload their own image. That makes the src of the HTML image to something like this.

<img id="preview" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgA... />

When they post the registration form. The data will be sent to a REST service. I can send the base64 encoded data when a user uploaded an avatar himself. But how do I handle the default avatar? It is an url instead of base64 encoded data.

Here I was playing with jsFiddle, loading img from tag in canvas an doing .toDataURL(). — MichD, Apr 02 '13 at 09:49

score 48 · Accepted Answer · answered Apr 02 '13 at 10:09

48

You can try following sample http://jsfiddle.net/xKJB8/3/

<img id="preview" src="http://www.gravatar.com/avatar/0e39d18b89822d1d9871e0d1bc839d06?s=128&d=identicon&r=PG">
<canvas id="myCanvas" />

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("preview");
ctx.drawImage(img, 10, 10);
alert(c.toDataURL());

answered Apr 02 '13 at 10:09

Chamika Sandamal

23,565
5
63
86

1

Nice code! One more question. Will the base64 output always be assumed to be PNG data (does the Canvas instance 'convert' the image data?), if so, is there a way to identify the image's real data type (magic numbers?) and change the resulting base64 protocol declaration? – Big Rich Nov 06 '13 at 18:03
I (begrudgingly) accept that we need to create a canvas element in order to generate the encoding, however my preference would be to generate it in js rather than having to litter view code with placeholders (my use case requires a few images) - like this similar answer: http://stackoverflow.com/a/22172860/1177832 – danwild May 27 '15 at 01:41
What if the src is an svg image – Kishore Relangi Nov 13 '15 at 04:36
1

Can you please make it work with URL https://img.youtube.com/vi/gs415cKPASA/maxresdefault.jpg. It throw an error, "Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported." – Sanjay Joshi Jan 29 '18 at 06:53

score 9 · Answer 2 · answered Jan 06 '14 at 00:31

9

You can also use the FileReader class :

    var reader = new FileReader();
    reader.onload = function (e) {
        var data = this.result;
    }
    reader.readAsDataURL( file );

answered Jan 06 '14 at 00:31

httpete

5,875
4
32
41

1

But then, the file will need to be in blob format :/ – yashas123 Dec 21 '17 at 19:00
2

The question is, how to get base64 from image element, Not from file path – Loki Sep 05 '20 at 16:02

How to get base64 encoded data from html image

2 Answers2

Linked