Canvas Konva stage.toDataUrl（）没有呈现我在画布中看到的图像？

我最近开始使用Konva库从Web API提供的数据在线创建一些图像。图像通常由一些文本、一些矩形和一些小图像组成。这些图像也来自相同的Web API。我将它们转换为Base64字符串，并将它们分配给img.src标记。所有这些都很好，完成后，我看到了一个画布，其中包含了我期望看到的所有文本、矩形和图像

当我试图从舞台/画布创建PNG时，问题就出现了。画布正在渲染为图像，所有文本和线条都在那里，但图像不在那里。起初我得到的是全黑背景，但后来我发现下面的文章提到需要渲染为PNG和/或制作不透明背景。我提到这一点只是因为我想知道这里是否也发生了类似的事情

不管怎样，这里有一些代码片段，也许它们能帮助我们弄明白这一点

<div id="container"></div>

const stage = new Konva.Stage({
    container: 'container',
    width: width,
    height: height
});

const layer = new Konva.Layer();

switch...

    case 'Picture':
    {
        // Get the image from the Web API
        const image = this.store.images.getThumb(
            f.fldData.fldDataValue
        );

        const img = new Image();
        const t = this;

        // Create the Konva.Image() and add it to the stage
        img.onload = function() {
        // resize image keeping aspect ration
            response = t.calculateAspectRatioFit(img, w, h);
            const imgWidth = response.width;
            const imgHeight = response.height;

            const chPicture = new Konva.Image({
                x: x,
                y: y,
                image: img,
                width: imgWidth,
                height: imgHeight
            });

            // add the image to the layer
            layer.add(chPicture);

            // add the layer to the stage
            stage.add(layer);
        };

        image.subscribe(results => {
            // Convert image to Base64
            const fileReader = new FileReader();
            fileReader.readAsDataURL(results);
            // When it's ready, assign Base64 string to img src
            fileReader.onloadend = () => {
                img.src = fileReader.result;
            };
        });
    }
    break;

...

// Convert the image from the Web API to Base64
const dataURL = stage.toDataURL({
    mimeType: 'image/png',
    quality: 1.0
});

// Resize the image made from the canvas and display it on the screen
const container = document.getElementById('displayImage');
const i = new Image();
i.style.width = '320px';
i.style.height = '196px';
i.src = dataURL;
container.appendChild(i);

const stage=新Konva.stage({
容器：'容器'，
宽度：宽度，
高度：高度
});
const layer=新的Konva.layer（）；
转换
案例“图片”：
{
//从Web API获取图像
const image=this.store.images.getThumb(
f、 fldData.fldDataValue
);
const img=新图像（）；
常数t=这个；
//创建Konva.Image（）并将其添加到舞台
img.onload=函数（）{
//调整图像大小保持纵横比
响应=t.计算光谱（img，w，h）；
const imgWidth=response.width；
const imgHeight=响应高度；
const chPicture=新Konva.Image({
x:x，
y:y，
图片：img，
宽度：imgWidth，
高度：imgHeight
});
//将图像添加到图层
图层添加（chPicture）；
//将层添加到舞台
阶段。添加（层）；
};
image.subscribe（结果=>{
//将图像转换为Base64
const fileReader=new fileReader（）；
fileReader.readAsDataURL（结果）；
//准备好后，将Base64字符串分配给img src
fileReader.onloadend=（）=>{
img.src=fileReader.result；
};
});
}
打破
...
//将图像从Web API转换为Base64
const dataURL=stage.toDataURL({
mimeType:'image/png'，
质量：1.0
});
//调整从画布生成的图像的大小并将其显示在屏幕上
const container=document.getElementById（'displayImage'）；
常数i=新图像（）；
i、 style.width='320px'；
i、 style.height='196px'；
i、 src=dataURL；
（一）儿童；

img.onload异步工作。这意味着在加载映像后将执行回调函数

正如我所见，在创建整个阶段后，您正在同步保存到base64：

// Convert the image from the Web API to Base64
const dataURL = stage.toDataURL({
    mimeType: 'image/png',
    quality: 1.0
});

---

您只需确保已加载所有图像。只有转换到dataURL。

Image.onload才会异步启动。因此，在您调用toDataURL时，尚未调用它。该阶段似乎没有在完全加载时触发的事件？我怎样才能知道这是什么时候发生的，这样我就可以在适当的时间调用.toDataUrl（）。@toddavis舞台上没有这样的事件。但是每个

新图像（）具有
onload
方法。检查其内部是否已加载所有图像。