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

Question

我的 JS 代码使用图像文件在 Canvas 上绘制图像。但是，此代码仅适用于存在浏览器缓存的情况 - 当页面第二次加载时。缓存为空(ctrl + f5)时， Canvas 为空。有没有办法在代码执行之前预加载图像文件或其他方式使其首次工作？

<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

图像加载是一种异步操作，因此在复制到 Canvas 之前需要等待图像加载。尝试这样的事情:

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 元素可能会起作用，但通常不能保证成功。