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:

1. Choose a default avatar
2. 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.

Answer 1

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()); 

Answer 2

You can also use the FileReader class :

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