Question

您好我正在编写一个函数将大图像分解为单个较小的图块，并通过Filesaver.js在本地保存图块。但是，出于某种原因，for循环只保留写入最后一个tile。例如，如果我有一个图像并将其分解为4个块，并且只决定在第一行写出两个块，两个保存的图像块都显示第二个图像块。

我还将块编号写入图像名称（TestImage_0.jpg＆amp; TestImage_1.jpg），但两个图块图像名称都是TestImage_1.jpg。我不知道为什么！，甚至试过context.clearRect，但没有成功。有人可以帮我解决这个愚蠢的问题吗？这是我的功能：

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);
}

即使警报显示正确的＆＃39; i＆＃39;循环的价值...... 请问，任何人，是我错过的一些javascript异步问题（也将算法转换为Promise，但这并没有解决任何问题）

Answer 1

因此，javascript的异步功能使一切都变得奇怪。最终通过在here的帮助下创建重复函数并在函数中添加延迟（重要）来使得拼贴生成算法更正。还必须传递行和列值，以便生成正确的模板位置。这是我的结果代码：

    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*/
    }

希望这可以帮助那些陷入同样烦人问题的人......

图像切片，只保存（通过Filesaver.js）序列中的最后一个切片

1 个答案: