tranchage d'image, enregistre seulement (via Filesaver.js) la dernière tranche dans l'ordre

Question

Salut J'écris une fonction pour casser une grande image en petites tuiles individuelles, et enregistre les tuiles localement via Filesaver.js. Cependant, pour une raison quelconque, la boucle for continue d'écrire uniquement la dernière mosaïque. Par exemple, si j'ai une image et la divise en 4 blocs, et décide seulement d'écrire deux blocs dans la première rangée, les deux sauvegardés les vignettes d'image affichent la deuxième vignette d'image.

J'écris également le numéro de bloc dans le nom de l'image (TestImage_0.jpg & TestImage_1.jpg), mais les deux noms d'image de pavé sont TestImage_1.jpg. Je n'ai aucune idée pourquoi !, même essayé context.clearRect, mais pas de succès. Quelqu'un peut-il m'aider s'il vous plaît ici avec ce problème stupide? Voici ma fonction:

var canvas = document.createElement('canvas'); 

var TileWidthpx = parseInt(document.getElementById("HorizPPT").value); 
var TileHeightpx = parseInt(document.getElementById("VertPPT").value); 
canvas.setAttribute('width', TileWidthpx); 
canvas.setAttribute('height', TileHeightpx); 

for(var i = 0; i < 2; i++) 
{ 
    var context = canvas.getContext('2d'); 
    context.clearRect(0,0,canvas.width,canvas.height); 
    context.drawImage(CoverageImg,i*TileWidthpx,0,TileWidthpx,TileHeightpx,0,0,TileWidthpx,TileHeightpx); 

    canvas.toBlob(function(blob){saveAs(blob,'TestImage_'+i+'.jpg');}, "image/jpg"); 

    alert('done: '+i); 
} 

Même si l'alerte affiche la valeur correcte « i » de la boucle ... S'il vous plaît, tout le monde, est-il un peu de javascript async-problème que je suis absent (converti également le algorithme à une promesse, mais cela n'a rien résolu)

Answer 1

Donc, c'était la fonctionnalité asynchrone de javascript qui rendait tout bizarre. Finalement, l'algorithme de génération de tuiles a été corrigé en créant une fonction répétitive et en ajoutant des retards (importants) dans la fonction, avec l'aide de here. A également dû passer les valeurs de ligne et de colonne afin que la position de modèle correcte puisse être générée. Voici mon code qui en résulte:

var canvas = document.createElement('canvas'); 

    var TileWidthpx = parseInt(document.getElementById("HorizPPT").value); 
    var TileHeightpx = parseInt(document.getElementById("VertPPT").value); 
    canvas.setAttribute('width', TileWidthpx); 
    canvas.setAttribute('height', TileHeightpx); 

    var context = canvas.getContext('2d');  

    var col = 0; //variable for columns 
    var row = 0; 
    var ColCount = 2; 
    var RowCount = 2; 
    Loop(col,row,ColCount,RowCount); //call delayed loop for first time 
    function Loop (COL,ROW,ColCount,RowCount) //repetitive function 
    {  
     setTimeout(function() 
     {  
      context.beginPath(); 
      context.drawImage(CoverageImg,COL*TileWidthpx,ROW*TileHeightpx,TileWidthpx,TileHeightpx,0,0,TileWidthpx,TileHeightpx); 
      canvas.toBlob(function(blob){saveAs(blob,'TestImage_C'+COL+'_R'+ROW+'.png');}, "image/png"); 
      context.closePath(); 
      context.clearRect(0,0,canvas.width,canvas.height); 
      COL++; 

      if(COL == ColCount) 
      { 
       COL = 0; 
       ROW++; 
      } 
      if(ROW < RowCount)     
       Loop(COL,ROW,ColCount,RowCount); //repeat function while below Col threshold  

     }.bind(this), 2000) //function delayed with 2 seconds*/ 
    } 

Hope this helps quiconque se retrouve avec le même problème gênant ...