Multiple images sur différents canvas

Pour toutes les discussions javascript, jQuery et autres frameworks
Répondre
stelino
Messages : 1
Enregistré le : 29 avr. 2021, 21:08

Multiple images sur différents canvas

Message par stelino » 29 avr. 2021, 21:12

Bonjour,



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...

Avatar du membre
webmaster
Administrateur du site
Messages : 383
Enregistré le : 28 févr. 2017, 15:19

Re: Multiple images sur différents canvas

Message par webmaster » 02 mai 2021, 17:28

Bonjour,

Il faut sans doute indiquer un id de canvas unique quand il y a plusieurs images en utilisant i :

Code : Tout sélectionner

preview.append('<canvas id="canvas'+i'+'"></canvas>');
Et bien sur pareil à l'utilisation du getElementById
TJS : 20 ans et mon livre Tout JavaScript chez Dunod
https://www.toutjavascript.com/livre/index.php

Répondre