CodiFolio

Html5 image cropper.

Originalité

Les pages, tutoriels, cours traitant des api html5 foisonnent sur internet, upload de fichiers, balise canvas, file api etc...
Je n'ai cependant pas trouvé de script permettant d'utiliser canvas pour rééchantillonner une image.
L'exemple présenté dans cette page regroupe des informations trouvées ici et là (voir information en bas de page), et propose un cheminement complet jusqu'à l'envoi vers le serveur.

Intérêt de la chose.

On peut imaginer utiliser ce type de fonctionnalité dans le cadre, par exemple, de l'upload de photos de profil - L'utilisateur envoie une image dans les dimensions et proportions voulues.

L'idée est de laisser au navigateur tout le travail de découpage et rééchantillonnage de l'image. Pour ce faire, il suffit de représenter la zone sélectionnée de l'image dans un canvas HTML5. L'utilisation des méthodes translate et scale permettent de positionner et redimensionner l'image dans le canvas.
Ensuite, la méthode toDataURL permettra d'envoyer l'image vers un serveur ou ailleurs.

Etapes

  1. Charger une image en local, quelque soit sa dimension et de l'afficher dans la page.
  2. Sélectionner une zone de cette image dont les proportions sont forcées (elle pourrait ne pas l'être, mais j'avais besoin qu'elles le soient).
  3. Représenter la zone sélectionnée.
  4. Permettre l'upload de la partie de l'image qui a été sélectionnée

Le code

<p>
  <label for="files">Sélectionner une image:</label>
  <input type="file" id="files" name="files" />
</p>
<div class="row-fluid">
  <div id="contcropper" class="span9">
    <div id="cropper"></div>
  </div>
  <div id="contcanvas" class="span3">
    <canvas id="cropcanvas" width="201" height="229"></canvas>
    <div>
      <button class="btn btn-large btn-primary" id="export" type="button">Export</button>
    </div>
  </div>
</div>		

Démo:

Regarder dans la console pour voir le résultat. C'est à dire l'image au format Data URL.

Informations

Cet exemple reprend pas mal de code trouvé sur www.html5rocks.com.

La sélection sur l'image de la zone à découper se fait grâce à Jcrop, qui fait très bien ce qu'on lui demande.

Retour à l'index.

Commentaires.

Cet article vous a plu ou pas, vous êtes un robot...
Dites-le via le formulaire ci-dessous:

Commentaires déjà postés sur ce sujet:

  • le 12/02/2014 à 23h47 Gronaz
    Tres bon
  • le 06/06/2013 à 10h20 Loïc
    Bravo garçon, vous devez être très auto-satisfait,