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.
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.
<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>
$(function(){
// Test du support des apis - désolé, il y a juste un alert si votre navigateur n'y arrive pas ... En même temps, un alert, ça marche partout.
if (window.File && window.FileReader && window.FileList && window.Blob) {
document.getElementById('files').addEventListener('change', handleFileSelect, false);
} else {
alert('Votre navigateur ne permet pas une utilisation complète de l'"api fichier".');
}
$('#export').on('click', function(){
var exp = document.getElementById('cropcanvas').toDataURL('image/jpeg');
console.log(exp);
});
})
function handleFileSelect(evt) {
var files = evt.target.files; // FileList object
// Pour tous les fichiers sélectionnés ... (dans cet exemple, on n'en choisit qu'un).
for (var i = 0, f; f = files[i]; i++) {
// On ne s'occuppe que des images.
if (!f.type.match('image.*')) {
continue;
}
var reader = new FileReader();
reader.onload = function(){
var img = new Image();
img.onload = function(){
$('#cropper').animate({width:$('#cropimg').width(), height:$('#cropimg').height()});
}
img.src = reader.result;
var pic = $('<img/>').attr({'src': reader.result, id:'cropimg'});
$('#cropper').html(pic);
bindCrop(img);
}
// Lire l'image au format data URL.
reader.readAsDataURL(f);
}
}
function bindCrop(img){
jQuery(function($) {
$('#cropimg').Jcrop({
aspectRatio: 201/229,
onSelect : function(c){
drawCanvas(img, c);
}
});
});
}
function drawCanvas(img, c){
var r = $('#cropimg').width()/img.width;
var cvw = $('#cropcanvas').width();
var cvh = $('#cropcanvas').height();
var r2 = (cvw / c.w) * r;
// réattribuer width et height permet un refresh du canvas (il existe sûrement un autre moyen).
$('#cropcanvas').attr({'width':cvw, 'height':cvh});
var ctx = document.getElementById('cropcanvas').getContext('2d');
ctx.restore();
ctx.scale(r2, r2);
ctx.translate(-c.x/r, -c.y/r);
ctx.drawImage(img,0,0);
}
Cet exemple reprend pas mal de code trouvé sur www.html5rocks.com
HTML5 Rocks is now Web Fundamentals .
Merci à Tom Keller de HTML Cheat Sheet qui m'a signalé ce changement.
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.