Javascript 圖片上傳問題

Question

我正在開發的腳本存在此問題，要在 canvas 上上傳圖像，並使用 cursor 讓它像旋轉木馬一樣通過

VM20:158 Uncaught TypeError: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The provided value is not of type '(CSSImageValue or HTMLImageElement or SVGImageElement or HTMLVideoElement or HTMLCanvasElement or ImageBitmap or OffscreenCanvas)'
    at draw (<anonymous>:158:57)

當我 go 指向指向問題的行時

if (imgArray.length == sprite.cols * sprite.rows) {
  ctx.drawImage(imgArray[ci], 0, 0);
}

但是當我第二次重做時（這意味着按 F5 並再次上傳圖像）它可以工作

第一次被跳過的代碼是

 function showFile() {
  var fileInput = document.querySelector('input[type=file]');

  for (var i = 0; i < fileInput.files.length; i++) {
    var reader = new FileReader();
    reader.onload = function (readerEvent) {
      var listItem = document.createElement('li');

      imagenes.push(readerEvent.target.result);
      image_load = 'si';
    };
    reader.readAsDataURL(fileInput.files[i]);
  }
}

問題是：為什么它僅在我重新執行該過程而不是第一次時才有效？

Google 網站上的來源

https://sites.google.com/view/pruebamodelado/home

圖片位於https://sites.google.com/view/pruebamodelado/fotos-test-downlaod?authuser=0

Answer 1

reader.onload = function (e) {
    var img = document.createElement("IMG");

    img.src = e.target.result;

  imagenes.push(img.src);
  image_load="si"                       
}

您在這里創建了一個競爭條件，並將src字符串推送到數組而不是圖像。 在將圖像繪制到 canvas 之前，它必須被加載，並且您沒有監聽加載事件。 結果是有時圖像有足夠的時間加載，有時它們沒有，從而導致錯誤。 它可以第二次工作，因為您的瀏覽器可能正在緩存圖像並且它們加載得更快。 你可以像這樣解決它：

reader.onload = function (e) {
  var img = document.createElement("IMG");
  img.onload = () => {
    imagenes.push(img);
    image_load="si" 
  }
  img.src = e.target.result;                    
}

編輯：現在我看到您稍后在代碼中從 src 創建另一個Image實例，但同樣的問題也發生在那里 - 您需要先聽load事件，然后才能在 canvas 上繪制它。