konvajsキャンバスをイメージして別のキャンバスにイメージをロードする

Question

私は多くのコンバージュキャンバスを作り、コンバイメージに変換しようとしました。 最後に、これらの画像を別のキャンバスにロードして表示します。私は私の結果を考える何

function main(){ 
    var total_konva_stage= createStage(); 
    var imagesLayer= new Konva.Layer(); 
    for (var key in array){ 
     $(".tmpcontainer").remove(); 
     containerName = containerNameBase + key; 
     $("#hidden_div").append("<div id='"+containerName+"' class='tmpcontainer'></div>"); 

     var konva_stage =createcanvas(containerName); //create a hidden dynamic div and bind this stage to it 
     var img = konva_stage .toDataURL("image/png"); 
     var imageObj = new Image(); 
     imageObj.src = img 
     imageObj.onload = function() { 
      callback_canvastoImg(imagesLayer, imageObj); 
     }; 
    } 
    total_konva_stage.add(imagesLayer); 
    total_konva_stage.show(); 
    total_konva_stage.draw(); 
} 
function callback_canvastoImg(imagesLayer, imageObj){ 
     var konva_image = new Konva.Image({imageObj}); 
     imagesLayer.add(konva_image); 
} 

は「total_konva_stage」は、すべての個別のIMG konva_stageからそれを持っているということです。

しかし、私は私の第二IMGが、私は今は考えている

第一、第二IMGが含まれている最初のIMG、私の第三IMGが含まれてい、助けてください。 ありがとう

Answer 1

onload関数コールバックは非同期です。つまり、配列全体が処理された後にのみ実行されます。

したがって、この行には：callback_canvastoImg(imagesLayer, imageObj);変数imageObjは、最後に作成されたイメージを参照します。

は、これを回避するために、次のことができます（場合には、あなたが babelのようなものを使用する必要があります）あなたはループ反復のために閉鎖関数を定義することができます

const imageObj = new Image(); 

変数を宣言するの

1. 使用現代のJS構文。あなただけのforループの代わりarray.forEachを使用する必要があります。

   array.forEach(function(item, key) { 
       $(".tmpcontainer").remove(); 
       containerName = containerNameBase + key; 
       $("#hidden_div").append("<div id='"+containerName+"' class='tmpcontainer'></div>"); 
   
       var konva_stage =createcanvas(containerName); //create a hidden dynamic div and bind this stage to it 
       var img = konva_stage .toDataURL("image/png"); 
       var imageObj = new Image(); 
       imageObj.src = img 
       imageObj.onload = function() { 
       callback_canvastoImg(imagesLayer, imageObj); 
       }; 
   }