如何等待在画布中加载图像

Question

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

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

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

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

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

浏览器开发者控制台中的Network标签显示在加载图片的时候是Img请求。

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

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

UPD。我尝试构建自定义等待条件：

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.我尝试使用此代码：

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}

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

Answer 2

您可以将所有代码放在您想要在图像成功加载后处理的image onload 事件中。

演示 （加载成功后在画布上绘制图像）

var ctx = document.getElementById('canvas').getContext('2d');
ctx.fillStyle = 'black';
ctx.font="50px Arial";
ctx.fillText('Loading...', 300, 200);
var image = new Image();
image.src = 'https://s-media-cache-ak0.pinimg.com/originals/e9/dc/10/e9dc10141d0b4e5c9e360cc5669e65ed.jpg';
image.onload = function() {
  ctx.clearRect(0, 0, 816, 480)
  ctx.drawImage(image, 0, 0);
}

#canvas {
  background-color: lightgrey;
}

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