Je voudrais faire en sorte qu'un utilisateur puisse sélectionner plusieurs images depuis un champ input de type file grâce à l'attribut multiple.
Puis afficher les différentes images sur différents canvas. (1 canvas = 1 image)
Pour ce faire, j'ai déjà mis en place le formulaire contenant le champ file et lorsque je sélectionne & seule images mon code fonctionne !
...mais pas si je sélectionne plusieurs images... :/
for(var i = 0; i < listing.length; i++){
preview.append('<canvas id="canvas"></canvas>');
var file = e.target.files;
var reader = new FileReader();
reader.onloadend = function(e){
var image = new Image();
image.src = e.target.result;
image.onload = function(e){
var maxwidth = 800;
var maxheight = 800;
var ratio = 0;
if(image.width > maxwidth){
ratio = maxwidth / image.width;
image.width = image.width * ratio;
image.height = image.height * ratio;
}
if(image.height > maxheight){
ratio = maxheight / image.height;
image.width = image.width * ratio;
image.height = image.height * ratio;
}
var canvas = document.getElementById('canvas');
canvas.width = image.width;
canvas.height = image.height;
var ctx = canvas.getContext('2d');
ctx.imageSmoothingEnabled = true;
ctx.imageSmoothingQuality = "high";
ctx.drawImage(image,0,0,image.width,image.height);
// dataURL = canvas.toDataURL('image/jpeg',0.92);
}
}
reader.readAsDataURL(file);
}
Dés que je veux faire en sorte d'append plusieurs canvas comme suit :
preview.append('<canvas id="canvas'+[id']+'"></canvas>');
en faisant aussi la même chose lors de la sélection de l'élément :
var canvas = document.getElementById('canvas'+[id]);
j'obtiens une ereur sur la ligne ci-dessous :
canvas.width = image.width; //width is undefined
J'insiste sur le fait que si je sélectionne une seule image depuis mon input, l'image s'affiche correctement !
J'ai aussi remarqué que si j'en sélectionnait plusieurs, alors ses dernières défilent sur le même canvas pour s'arrêter à la dernière.
Votre aide serait la bienvenue
Un connaisseur ?
Merci...
