Question

使用此代码，当imageUpdated为true时，我尝试使用绘制的图像更新画布。
我使用时间标签，因此图像不是从浏览器缓存中加载的但是当我使用timetags时，画布保持空白。它没有时间标签。

var imageUpdated = true;
if(imageUpdated) 
{
  imageUpdated = false; 
  var heightImg = new Image;
  heightImg.src = '/path/to/image.png?' + new Date().getTime().toString();
  this.canvas = $('<canvas />')[0];
  this.canvas.width = this.width;
  this.canvas.height = this.height;
  this.canvas.getContext('2d').drawImage(heightImg, 0, 0, this.width, this.height);
}
/*rest of event happens here*/

谢谢！

Answer 1

可能是因为您在加载图像之前绘制图像。我猜这也是没有时间标签的原因，它已经在缓存中，因此可以立即绘制。

解决方案是在加载图像后绘制。因此，在图像上添加一个eventListener：

image.addEventListener('load', callback);

在回调中，在画布上绘制图像。

例如：

// add eventlistener
heightImg.addEventListener('load', function(e) {
    var width = heightImg.width;
    var height = heightImg.height;

    var canvas = document.querySelector('canvas');
    canvas.width = width;
    canvas.height = height;

    canvas.getContext('2d').drawImage(heightImg, 0, 0, width, height); 
});

// trigger the loading
heightImg.src = url + '?time=' + new Date().getTime().toString();

Fiddle

当image.src有时间标签时更新画布图像

1 个答案: