HTML 5 在 Vue SPA 中等待 drawImage 完成

Question

我已经尝试调试了一个星期，现在我怀疑问题出在 drawImage 函数没有时间完成。我有一个 for 循环，它通过将两个不同的 canvas 元素拼接在一起来组成 canvas 元素，然后将 composedCanvas 作为框架添加到 GIF.js 对象。我保留运行的问题是在我输出的 GIF 文件中底部缝合的 canvas 没有出现或部分出现（下图开始绘制但没有完成）。我的问题是如何确保 drawImage 在 Vue SPA 方法的上下文中同步执行。我已经尝试过 Promise，但我还没有让它工作。任何人都可以解释并帮助我吗？

编辑：我尝试将我的 drawImage 包装在一个承诺中，并且 await 但它引发了类型错误。

Answer 1

我设法通过将 drawImage 步骤正确地包装在一个单独的方法中并以正确的方式放在承诺中来使其工作。请参阅下面的代码示例，其中有两个 methods 是罪魁祸首，但现在已修复。

async composeCanvas( gif , timeStep , visibleLayers , delayInput) {
    const mapCnv = this.getMapCanvas();
    await this.updateInfoCanvas( timeStep )
    const numberVisibleLayers = visibleLayers.length;
    const composedCnv = await this.stitchCanvases( mapCnv , numberVisibleLayers );
    gif.addFrame(composedCnv, {copy:false, delay: delayInput});
},
async stitchCanvases( mapCanvas , numberVisibleLayers ) {
    return new Promise(( resolve ) => {
        var composedCnv = document.createElement('canvas');
        var ctx = composedCnv.getContext('2d');
        var ctx_w = mapCanvas.width;
        var ctx_h = mapCanvas.height + ((numberVisibleLayers - 1) * 30) + 40;
        
        composedCnv.width = ctx_w;
        composedCnv.height = ctx_h;

        [
            {
                cnv: mapCanvas,
                y: 0
            },
            {
                cnv: this.infoCanvas,
                y: mapCanvas.height
            }
        ].forEach( ( n ) => {
            ctx.beginPath();
            ctx.drawImage(n.cnv, 0, n.y, ctx_w, n.cnv.height);
        });

        resolve(composedCnv)
    })
}

HTML 5 在 Vue SPA 中等待 drawImage 完成

HTML 5 wait for drawImage to finish in a Vue SPA

html

canvas

drawimage

vue.js