Ich habe mich in vielen JavaScript-Antworten umgesehen, aber noch keine gefunden, die mein Problem wirklich löst. Ich versuche, ein Bild zu laden, die Pixeldaten zu erfassen, eine Analyse durchzuführen und dann ein anderes Bild zu laden, um den Vorgang zu wiederholen.

Mein Problem ist, dass ich nicht alle Bilder vorab laden kann, da dieses Skript in der Lage sein muss, große Mengen von Bildern zu bearbeiten, und das Vorabladen zu ressourcenintensiv sein kann. Ich versuche also nicht, jedes Mal ein neues Bild durch eine Schleife zu laden, stecke aber in einer Wettlaufsituation zwischen dem Laden des Bildes und dem Zeichnen des Skripts im Kontext der Zeichenfläche. Zumindest bin ich mir ziemlich sicher, dass dies der Fall ist, da das Skript mit den zuvor zwischengespeicherten Bildern problemlos funktioniert (z. B. wenn ich die Seite nach dem Laden zuvor aktualisiere).

Wie Sie sehen werden, sind mehrere Codezeilen auskommentiert, da JavaScript für mich unglaublich neu ist und sie nicht so funktionierten, wie ich es mir vorgestellt hatte, aber ich wollte sie nicht vergessen, wenn ich die Funktionalität später benötigte .

Dies ist der Codeausschnitt, von dem ich glaube, dass er das Problem verursacht:

EDIT: Also bekam ich meine Funktion zu arbeiten, nachdem ich einem Vorschlag gefolgt war

 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 = currentIndex;
  currentimage.onload = function(e) {

    // Function code here

    window.loadedImageCount++;

    if (loadedImageCount == imageURLarray.length) {

      // Function that happens after all images are loaded here
    }
  }
  currentIndex++;
  loadImages(context, width, height, imageURLarray, currentIndex);
  return;
}