JavaScript-未捕獲的TypeError：類型錯誤

Question

我正在嘗試破壞一個Spritesheet，但是，它並沒有像應該的那樣將其放入2D數組中。 在我的代碼結尾處，在console.log附近，它吐出了ImageData ...但是當它嘗試放置putImageData ...時，我得到了Uncaught TypeError: Type error

救命？

這是我的代碼：

$(document).ready(function () {
    console.log("Client setup...");
    canvas = document.getElementById("canvas");
    context = canvas.getContext("2d");
    canvas.tabIndex = 0;
    canvas.focus();
    console.log("Client focused.");

    var imageObj = new Image();
    imageObj.src = "./images/all_tiles.png";
    imageObj.onload = function() {
    context.drawImage(imageObj, imageWidth, imageHeight);
    };

    var allLoaded = 0;
    var tilesX = ImageWidth / tileWidth;
    var tilesY = ImageHeight / tileHeight;
    var totalTiles = tilesX * tilesY;        
    var tileData = [totalTiles]; // Array with reserved size
    for(var i=0; i<tilesY; i++)
    {
      for(var j=0; j<tilesX; j++)
      {           
        // Store the image data of each tile in the array.
        tileData.push(context.getImageData(j*tileWidth, i*tileHeight, tileWidth, tileHeight));
        allLoaded++;
      }
    }

    if (allLoaded == totalTiles) {
    console.log("All done: " + allLoaded);
    console.log(tileData[1]);
    context.putImageData(tileData[0], 0 ,0); // Sample paint
    }


});

錯誤發生在context.putImageData(tileData[0], 0 ,0); // Sample paint context.putImageData(tileData[0], 0 ,0); // Sample paint

這是http://jsfiddle.net/47XUA/上方的代碼示例

Answer 1

您的問題是tileData的第一個元素不是ImageData對象， 而是一個純數字 ！ 初始化數組時，您使用了：

var tileData = [totalTiles];

這意味着tileData[0]等於totalTiles的值，即數字483 。 您向putImageData提供了一個數字而不是ImageData對象，瀏覽器在混亂中拋出錯誤。 如果您查看數組其余部分中的任何其他元素，就會發現它已成功按預期填充ImageData對象； 只有數組中的第一個元素是數字。

你可能打算這樣做：

var tileData = new Array(totalTiles);

這將創建具有指定的length屬性的數組，而不是將數組中的第一個值設置為數字。 就個人而言，我將進行一些性能測試，以查看它是否仍然有用。 使用var tileData = [];也可能會很好

Answer 2

當傳遞到語句中的變量或對象的類型不是該命令所期望的類型，並且無法將其轉換為有效值時，將導致類型錯誤。

有關錯誤的完整定義，請參見此處 。

因此，很可能上下文或tileData的格式不正確，或者為null或未定義

Answer 3

這可能是賽車狀況 。 僅在加載圖像./images/all_tiles.png時才使用drawImage。 但是，在觸發onload 之前 ，您正在上下文中使用圖像數據。 嘗試將onload處理程序之后的所有內容移動到onload處理程序中。

Answer 4

這里的問題是在執行腳本的其余部分之后，會調用imageObj.onload()函數。

這意味着對getImageData()查詢返回的是未定義的，因為調用時畫布中沒有圖像數據。

解決此問題的一種簡單方法是將其余腳本imageObj.onload在imageObj.onload函數中，如下所示：

$(document).ready(function () {
console.log("Client setup...");
canvas = document.getElementById("canvas");
context = canvas.getContext("2d");
canvas.tabIndex = 0;
canvas.focus();
console.log("Client focused.");

var imageObj = new Image();
imageObj.src = "./images/all_tiles.png";

imageObj.onload = function() {

  context.drawImage(imageObj, 0, 0);

  var allLoaded = 0;
  var tilesX = imageWidth / tileWidth;
  var tilesY = imageHeight / tileHeight;
  var totalTiles = tilesX * tilesY;        
  var tileData = new Array(); // Array with NO reserved size
  for(var i=0; i<tilesY; i++)
  {
    for(var j=0; j<tilesX; j++)
    {           
      // Store the image data of each tile in the array.
      tileData.push(context.getImageData(j*tileWidth, i*tileHeight, tileWidth, tileHeight));
      allLoaded++;
    }
  }

  context.putImageData(tileData[0], 0 ,0); // Sample paint
}; // End 'imageObj.onload()' scope.

}); // End document ready function scope.

這樣可以確保在context.drawImage()之后進行對getImageData()任何調用。

您在這里可能還存在一個問題，即您沒有繪制圖像以覆蓋畫布。 換行：

context.drawImage(imageObj, imageWidth, imageHeight);

至

context.drawImage(imageObj, 0, 0);

編輯：您還具有ImageWidth和imageWidth （高度相同）。 重命名這些。

編輯：在這里使用new Array(totalTiles)保留數組大小會導致問題。 當我們將新的圖塊圖像推送到數組時，它推送到預分配數組的末尾（從tileData[totalTiles] ）。 通過刪除size參數可以輕松解決此問題。 否則，除了使用push()我們還可以循環將圖像數據復制到數組中，例如： tileData[n] = getImageData(...) ，從tileData[0] 。

Answer 5

我正在使用Chrome。

context.drawImage(spritesheet.image, 0, 0, 4608, 768);// Works
context.drawImage(spritesheet.image, 768, 0, 768, 768, 4608, 768); // Doesn't work: Uncaught TypeError: Type error

謝謝！