Conver konvajs畫布將圖像加載到另一個畫布

Question

我試圖構建許多konvajs畫布並將它們轉換爲konva圖像。 最後將這些圖像加載到另一個畫布並顯示。

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語法。你只需要使用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); 
       }; 
   }