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

Question

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

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

我必须使用driver.sleep（），但这是一个糟糕而不可靠的解决方案。 还有的网页代码与帆布的一部分：

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

此外，应用程序是用角。

浏览器中开发人员控制台中的网络选项卡显示在加载图像时是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() thah结果是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

杰夫·克拉斯解释它很好他website：

浏览器加载图像，而异步脚本已经被 解释和执行。如果图像未完全加载，画布 无法呈现它。

幸运的是，这并不难解决。我们只需等待开始 绘图，直到我们收到来自图像的回调，通知加载 已完成。
window.addEventListener（“load”，draw，true）;

function draw(){          
    var img = new Image(); 
    img.src = "http://3.bp.blogspot.com/_0sKGHtXHSes/TPt5KD-xQDI/AAAAAAAAA0s/udx3iWAzUeo/s1600/aspnethomepageplusdevtools.PNG"; 

    img.onload = function(){ 
     var canvas = document.getElementById('canvas'); 
     var context = canvas.getContext('2d');  

     context.drawImage(img, 0, 0);   
    };    
} 

Answer 2

你可以把所有的代码，你想处理的图像已被成功加载后imageonload事件中。

DEMO （其被成功加载后在画布上绘制图像）

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>

Answer 3

的是另一种计算策略来等待在onload。

当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} 

并使用准备好的信号量来指示图像已准备好呈现。