檢查圖像的像素數據

Question

讓我們說：

Img = new Image();
img.src = 'test.png';

有沒有辦法檢查該圖像中的像素，說x= 10; y = 16; x= 10; y = 16; 並返回其RGBA數據？ 或者您是否必須創建像素陣列以查詢特定像素...我不確定在您設置圖像src時是否創建了像素陣列？

Answer 1

你必須先將它繪制到<canvas> 。 這僅在圖像來自同一個域時才有效（在您給出的示例中）

img = new Image();
img.src = "test.png";
img.onload = function() {
  var c = document.createElement('canvas'), d, img = this;
  if( c.getContext) {
    c.width = img.width;
    c.height = img.height;
    c = c.getContext("2d");
    c.drawImage(img,0,0);
    d = c.getImageData(0,0,img.width,img.height);
    img.getPixel = function(x,y) {
      return d.slice((y*img.width+x)*4,4);
    };
  }
  else {
    // canvas not supported, fall back
    img.getPixel = function(x,y) {return [0,0,0,0];}
  }
};

然后你可以調用圖像上的函數：

alert(img.getPixel(10,16));
// alerts something like 190,255,64,255