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

我认为我的结果是＆＃34; total_konva_stage＆＃34;将有来自konva_stage的每个单独的 img 。

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

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

Answer 1

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

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

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

使用现代js语法来声明变量（如果你应该使用babel之类的东西）
```
const imageObj = new Image();
```

您可以为循环迭代定义闭包函数。您只需使用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);
  };
}

Conver konvajs画布图像并将这些图像加载到另一个画布

1 个答案: