代码之家 › 专栏 › 技术社区 › Jay

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

konvajs jquery javascript

0

Jay · 技术社区 · 7 年前

最后将这些图像加载到另一个画布上并显示。

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

img公司 来自konva_舞台的。

img公司 将包含第一个 img公司 包含第一个、第二个 img公司

我现在不知道,请帮忙。

1 回复 | 直到 7 年前

1

lavrton 7 年前

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