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

Answer 1

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

---

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