HTML5畫布getImageData（）無法工作

當我使用getImageData（）函數來獲取圖像的數據與鉻，它表示未捕獲IndexSizeError：無法執行'CanvasRenderingContext2D''getImageData'：源寬度0 這裏是我的代碼：HTML5畫布getImageData（）無法工作

<!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>

這怎麼可能happended？以及如何解決它？

來源

2015-10-22 chensunn

您正在附加一個onload回調以實際將圖像繪製到畫布。但是隻有當圖像加載到DOM中並且必須從服務器獲取時纔會觸發。在您嘗試從畫布中提取圖像數據之前，是什麼讓你覺得發生這種情況？

混淆同步和異步代碼時存在這個問題，並且有許多技術可以解決這個問題。但是，如果你在調試器中設置了一個斷點，那麼我會下注錢，在這條線上繪製圖像和試圖讀取它的線，後者會在前者之前觸發。

您或者需要將處理程序放入您的onload處理程序（由於耦合而不推薦）或使用類似promise的東西來確保讀取數據的代碼在寫入代碼之後運行。

來源

2015-10-22 13:07:57

HTML5畫布getImageData（）無法工作

回答

相關問題