HTML5 畫布 getImageData() 無法工作

Question

當我使用 getImageData() 函數獲取帶有 chrome 的圖像的數據時，它說 Uncaught IndexSizeError: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The source width is 0. 這是我的代碼：

<!DOCTYPE html>
<html>
<head>
    <title>canvastest</title>
</head>
<body>
<img src="flower.jpg" hidden />
<canvas id="drawing" width="600" height="532">a drawing of something</canvas>
<script type="text/javascript" >
    var drawing = document.getElementById("drawing");
    if (drawing.getContext){
        var context = drawing.getContext("2d"),
            image = document.images[0],
            imageData,data,
            i,len,average,
            red,blue,green,alpha;

        image.onload = function(){
            context.drawImage(image,0,0);
        };

        imageData = context.getImageData(0,0,image.width,image.height);
        data = imageData.data;

        for (i=0,len=data.length;i<len;i+=4){
            red = data[i];
            green = data[i+1];
            blue = data[i+2];
            alpha = data[i+3];

            average = Math.floor((red + green + blue) / 3);

            data[i] = average;
            data[i+1] = average;
            data[i+2] = average;
        }

        imageData.data = data;
        context.putImageData(imageData,0,0);
    }
</script>
</body>
</html>

怎么會發生？ 以及如何解決？

Answer 1

您正在附加一個onload回調以實際將圖像繪制到畫布。 但是，只有在DOM中加載圖像並且必須從服務器獲取圖像時才會觸發。 在嘗試從畫布中提取圖像數據之前，是什么讓您認為發生了這種情況？

這是混合同步和異步代碼時的問題，並且有很多技術可以解決它。 但是如果你在調試器中設置一個斷點來繪制圖像和試圖讀取它的線，后者將在前者之前觸發，我會打賭。

您需要將處理放在onload處理程序中（因為耦合而不推薦）或者使用類似promise的方法來確保讀取數據的代碼在寫入代碼之后運行。

Answer 2

如果您不小心將0傳遞給width或height參數，也會出現該錯誤消息：

context.getImageData(0, 0, 0, 0); //Throws an IndexSizeError

不管是因為拼寫錯誤還是變量錯誤，將 0 傳遞給第三個或第四個參數總是會導致錯誤消息“源寬度為 0”。 或“源高度為 0”。

因此，您應該直接引用畫布的寬度/高度，而不是這樣做：

context.getImageData(0, 0, context.canvas.clientWidth, context.canvas.clientHeight);

或者添加一個條件來檢查以確保兩個值都不是假的：

if (my_width && my_height)
{
    context.getImageData(0, 0, my_width, my_height);
}

else
{
    alert('Invalid canvas width or height value!');
}

HTML5 畫布 getImageData() 無法工作

問題描述

2 個解決方案

解決方案1
5 已采納 2015-10-22 13:07:57

解決方案2
0 2022-01-17 11:52:05

HTML5 畫布 getImageData() 無法工作

問題描述

2 個解決方案

解決方案1 5 已采納 2015-10-22 13:07:57

解決方案2 0 2022-01-17 11:52:05

解決方案1
5 已采納 2015-10-22 13:07:57

解決方案2
0 2022-01-17 11:52:05