Jak uzyskać kodowane base64 dane z obrazu html

Question

Mam formularz rejestracyjny, w którym użytkownicy mogą wybrać awatar. Mają 2 możliwości:

1. Wybierz domyślny awatar
2. Prześlij swój awatar

W mojej stronie HTML Mam to.

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

Wyświetla wybrany avatar. Używam File Api, aby umożliwić użytkownikom przesyłanie własnego obrazu. To sprawia, że ​​src obrazu HTML jest podobny do tego.

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

Po zaksięgowaniu formularza rejestracyjnego. Dane zostaną przesłane do usługi REST. Mogę wysłać dane zakodowane w Base64, gdy użytkownik sam załaduje awatar. Ale jak mam obsłużyć domyślny awatar? Jest to adres URL zamiast danych kodowanych base64.

Answer 1

Można spróbować Poniższy przykładowy 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

Można również użyć klasy FileReader:

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