Question

我的JS代码使用图像文件在画布上绘制图像。但是，此代码仅适用于存在的浏览器缓存 - 第二次加载页面时。使用空缓存（ctrl + f5），画布为空。有没有办法在执行代码之前预先加载图像文件或其他一些方法使它第一次工作？

<canvas id="nr"></canvas>

<script>

var ctx = document.getElementById('nr').getContext('2d');
var img = new Image;
img.src = 'tlo.jpg';

var width = img.naturalWidth;
var height = img.naturalHeight;

document.getElementById('nr').width = width;
document.getElementById('nr').height = height;

console.log(width); //prints 0 with cache empty

ctx.drawImage(img, 0,0);

</script>

Answer 1

图像加载是一种异步操作，因此在复制到画布之前等待加载图像。尝试类似：

var ctx = document.getElementById('nr').getContext('2d');
var img = new Image;
img.src = 'tlo.jpg';
img.onload = function() {
   var width = img.naturalWidth;
   var height = img.naturalHeight;

   document.getElementById('nr').width = width;
   document.getElementById('nr').height = height;

   console.log(width); //prints 0 with cache empty

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

如果您愿意，可以在img元素上注册一个事件监听器。

<小时/> 我还建议将整个代码块包装在一个函数中，以便在窗口加载事件触发后执行。在页面加载过程中修改DOM元素可能会在您的浏览器中运行，但通常无法保证成功。

JS - 来自图像文件的Canvas - 仅适用于存在的浏览器缓存

1 个答案: