gpt4 book ai didi

javascript - 将 konva js Canvas 转换为图像并将这些图像加载到另一个 Canvas

转载 作者:行者123 更新时间:2023-12-03 03:47:25 31 4
gpt4 key购买 nike

我尝试构建许多 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);
    };
    }

关于javascript - 将 konva js Canvas 转换为图像并将这些图像加载到另一个 Canvas ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45319131/

31 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com