-1
lors du téléchargement d'images Je peux ajouter des images à partir de données de canevas au corps du document, mais seule la dernière image est téléchargée pourquoi?Télécharger plusieurs images à partir de plusieurs éléments de canevas en un seul clic
var canvas = document.getElementsByClassName('canvas');
\t for(var i=0; i<canvas.length; i++){
\t \t function doCanvas(){
\t \t \t \t ctx = canvas[i].getContext('2d');
\t \t \t \t ctx.fillStyle = '#f90';
\t \t \t \t ctx.fillRect(0, 0, canvas[i].width, canvas[i].height);
\t \t \t \t ctx.fillStyle = '#fff';
\t \t \t \t ctx.font = '30px sans-serif';
\t \t \t \t ctx.fillText('Canvas_'+i, 10, canvas[i].height/2 - 15);
\t \t }
\t \t doCanvas();
\t }
\t document.getElementById('download').addEventListener('click', downloadCanvas, false);
function downloadCanvas() {
\t \t \t \t for(var j=0; j < canvas.length; j++){
\t \t \t \t this.href = canvas[j].toDataURL();
\t \t \t \t \t var im = document.createElement('img');
\t \t \t \t \t im.src=this.href;
\t \t \t \t \t document.body.appendChild(im);
\t \t \t \t this.download = 'test'+j+'.png';
\t \t }
\t }<canvas width="300" height="100" class="canvas"></canvas>
<canvas width="300" height="100" class="canvas"></canvas>
<a id="download" style="background: gray; height: 20px; text-align: center; display: block; width: 100px">Download</a>