将 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 将引用最后创建的图像。
要避免这种情况,您可以:
使用现代 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);
};
}
我尝试构建许多 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 将引用最后创建的图像。
要避免这种情况,您可以:
使用现代 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); }; }