org - insertar imagenes en javascript

Cómo obtener datos codificados en base64 de la imagen html

Question

Tengo un formulario de registro donde los usuarios pueden elegir un avatar. Tienen 2 posibilidades:

1. Elige un avatar predeterminado
2. Sube su propio avatar

En mi página HTML tengo esto.

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

Muestra el avatar elegido. Utilizo File Api para permitir que los usuarios suban su propia imagen. Eso hace que el src de la imagen HTML a algo como esto.

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

Cuando publiquen el formulario de inscripción. Los datos serán enviados a un servicio REST. Puedo enviar los datos codificados en base64 cuando un usuario carga un avatar por sí mismo. Pero, ¿cómo manejo el avatar predeterminado? Es una url en lugar de datos codificados en base64.

Answer 1

Puede intentar seguir el ejemplo 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

También puedes usar la clase FileReader:

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