将 konvajs canvas 转换为图像并将这些图像加载到另一个 canvas

Conver konvajs canvas to image and load these image to another canvas

我尝试构建许多 konvajs canvas 并将它们转换为 konva 图像。 最后将这些图像加载到另一个 canvas 并显示。

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

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

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