javascript - 如何等待在 Canvas 中加载图像

Question

我的测试需要与 Canvas 中加载的图像进行交互。

但是我不知道如何实现加载图片的等待。如果我希望只有 Canvas 测试开始与它交互，而图像仍在加载。

我必须使用 driver.sleep()，但这是一个糟糕且不可靠的解决方案。有一部分带 Canvas 的页面代码:

<canvas class='ol-unselectable' width='816' height='400' style='width: 100%; height: 100%;'></canvas>

此外，该应用程序是用 Angular 编写的。

浏览器开发者控制台的Network选项卡显示加载图片时是Img请求。

我认为，可以编写一些代码来检查将图像加载到浏览器中的 Canvas 中并通过 js 执行程序使用它。

但我不知道该怎么做。请帮助我。

更新。我尝试构建自定义等待条件:

exports.isAllImageLoad = function isAllImageLoad(driver) {
    return new Condition('image loading', function(driver) {
        return driver.executeScript(
            'var img = new Image();' +
            'img.onload = function() { return true; };' +
            'img.onload()'
        ).then(function(result) {
            console.log('image loading: ' + result);
            return result;
        });
    });
};

并将其用于:

return driver.wait(isAllImageLoad(driver), waitTimeOut);

但是控制台显示 img.onload() 的结果是 null。

UPD.i 尝试使用此代码:

exports.isAllImageLoad = function isAllImageLoad(driver) {
    return new Condition('image loading', function(driver) {
        return driver.executeScript(
            'var image = new Image();' +
            'function mainLoop(){' +
                'if(image.complete){' +
                    'return true;' +
                '}else{' +
                    'return false;' +
                '}' +
            '}' +
            'mainLoop();'
        ).then(function(result) {
            console.log('image loading: ' + result);
            return result;
        });
    });
};

但同样返回null。

Answer 1

这是等待加载的另一种方法。

当 DOM 对图像完成所有它能做的并且它已经加载，或者图像加载失败时，它将信号量 image.complete 设置为 true。

您可以使用该信号量来确定渲染图像是否安全。

var image = new Image();
image.src = "imageURI";
function mainLoop(){
     if(image.complete){
          ctx.drawImage(image,0,0,100,100);
     }else{
          ctx.fillRect(0,0,100,100); // image placeholder
     }
     requestAnimationFrame(mainLoop);
}
mainLoop();

这允许您在加载图像时继续渲染。

尽管您不能直接判断图像是否已加载或出现错误。

另一种方法是附加您自己的信号量。

var image = new Image();
image.src = "imageURI";
image.onload =  function(){this.ready=true}

并使用就绪信号量指示图像已准备好渲染。