Come ottenere i dati codificati base64 dall'immagine html

Question

Ho un modulo di registrazione in cui gli utenti possono scegliere un avatar. Hanno 2 possibilità:

1. Scegli un avatar di default
2. caricare i propri avatar

Nella mia pagina HTML ho questo.

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

Visualizza l'avatar selezionato. Uso il file Api per consentire agli utenti di caricare la propria immagine. Ciò rende l'src dell'immagine HTML simile a questa.

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

Quando pubblicano il modulo di registrazione. I dati verranno inviati a un servizio REST. Posso inviare i dati codificati Base64 quando un utente ha caricato lui stesso un avatar. Ma come gestisco l'avatar predefinito? È un url invece di dati codificati in base64.

Answer 1

Si può provare seguente esempio 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

È inoltre possibile utilizzare la classe FileReader:

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