Conver konvajs canvas to image，并将这些图像加载到另一个画布上

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"将具有来自konva_stage的每个单独的img。

但我发现我的第二个img将包含第一个 img，我的第三个 img 包含第一个，第二个img

我现在不知道，请帮忙。 谢谢

Answer 1

onload函数回调是异步的。这意味着它只会在整个数组被处理后执行。

所以在这一行中：callback_canvastoImg(imagesLayer, imageObj);变量 imageObj 将引用上次创建的图像。

为避免这种情况，您可以：

1. 使用声明变量的现代 js 语法(以防您应该使用类似babel的东西(

   const imageObj = new Image();
   

2. 您可以为循环迭代定义闭包函数。你只需要使用array.forEach而不是 for 循环：

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