0

こんにちは、大きな画像を個々の小さなタイルに分割し、Filesaver.js を介してタイルをローカルに保存する関数を作成しています。ただし、何らかの理由で、for ループは最後のタイルのみを書き込み続けます。 tiles は 2 番目の画像タイルを表示します。

画像名(TestImage_0.jpg & 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);
}

アラートにはループの正しい「i」値が表示されますが...誰か、私が見逃しているJavaScriptの非同期問題ですか(アルゴリズムをPromiseに変換しましたが、何も解決しませんでした)

4

1 に答える 1

0

したがって、すべてを奇妙にしたのは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*/
    }

これが同じ厄介な問題で立ち往生している人を助けることを願っています...

于 2015-07-22T15:02:47.157 に答える