小编Bra*_*ins的帖子

我一直在寻找很多JavaScript答案,但我还没有找到真正解决我的问题的答案.我要做的是加载图像,抓取像素数据,执行分析,然后加载另一个图像以重复该过程.

我的问题是我无法预加载所有图像,因为这个脚本必须能够处理大量图像,并且预加载可能太耗费资源.所以我每次都试图通过一个循环来加载一个新的图像,但是我在图像加载和脚本之间的竞争条件被困在画布的上下文中.至少我很确定这是发生了什么,因为脚本将在预先缓存的图像中正常工作(例如,如果我先前加载页面后刷新).

正如你会看到有评论说,因为我是令人难以置信的新JavaScript和他们没有工作,我认为他们会的方式的几行代码,但我不想对他们忘了,如果我需要的功能后.

这是我认为导致问题的代码片段:

编辑:所以我按照建议完成了我的工作

 function myFunction(imageURLarray) {
  var canvas = document.getElementById('imagecanvas');
  console.log("Canvas Grabbed");

  if (!canvas || !canvas.getContext) {
    return;
  }

  var context = canvas.getContext('2d');

  if (!context || !context.putImageData) {
    return;
  }

  window.loadedImageCount = 0;
  loadImages(context, canvas.width, canvas.height, imageURLarray, 0);
}

function loadImages(context, width, height, imageURLarray, currentIndex) {
  if (imageURLarray.length == 0 || imageURLarray.length == currentIndex) {
    return false;
  }
  if (typeof currentIndex == 'undefined') {
    currentIndex = 0;
  }

  var currentimage = new Image();
  currentimage.src = imageURLarray[currentIndex];

  var tempindex …