Rozglądałem się za wieloma odpowiedziami JavaScript, ale nie znalazłem jeszcze jednego, który naprawdę odpowiada na mój problem. Próbuję załadować obraz, pobrać dane pikseli, przeprowadzić analizę, a następnie załadować inny obraz, aby powtórzyć proces.

Moim problemem jest to, że nie mogę wstępnie załadować wszystkich obrazów, ponieważ ten skrypt musi być w stanie pracować na dużych ilościach obrazów, a wstępne ładowanie może być zbyt duże. Więc utknąłem próbując załadować nowy obraz za każdym razem przez pętlę, ale utknąłem z sytuacją wyścigu między ładowaniem obrazu a skryptem rysującym go do kontekstu płótna. Przynajmniej jestem pewien, że to właśnie się dzieje, ponieważ skrypt będzie działał poprawnie z obrazami wstępnie wyeksponowanymi (na przykład jeśli odświeżę po wczytaniu strony).

Jak zobaczysz, skomentowano kilka wierszy kodu, ponieważ jestem niesamowicie nowy w JavaScript i nie działały one tak, jak myślałem, ale nie chciałem o nich zapomnieć, jeśli później potrzebowałem funkcji .

To fragment kodu, który, jak sądzę, powoduje problem:

EDYCJA: Więc mam swoją funkcję do pracy po zastosowaniu sugestii

 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;
}