web-dev-qa-db-fra.com

Comment obtenir des données encodées en base64 à partir d'une image HTML

J'ai un formulaire d'inscription où les utilisateurs peuvent choisir un avatar. Ils ont 2 possibilités:

  1. Choisissez un avatar par défaut
  2. Télécharger leur propre avatar

Dans ma page HTML, j'ai ceci.

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

Il affiche l'avatar choisi. J'utilise File Api pour permettre aux utilisateurs de télécharger leur propre image. Cela rend le src de l'image HTML à quelque chose comme ça.

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

Quand ils postent le formulaire d'inscription. Les données seront envoyées à un service REST. Je peux envoyer les données codées en base64 lorsqu'un utilisateur a lui-même téléchargé un avatar. Mais comment gérer l'avatar par défaut? C'est une URL au lieu de base64 données codées.

javascripthtmlimagebase64
32
Jonas Anseeuw

Vous pouvez essayer l’échantillon suivant 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());
39
Chamika Sandamal

Vous pouvez également utiliser la classe FileReader:

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