從canvas數組中提取像素

Question

我目前正在從事一個項目，為此我需要處理畫布的像素。 我確實通過使用canvascontext.getImageData（0,0，width，height）.data（）來提取像素。 這段代碼運行良好，並返回一個像素數組。 在此陣列內，像素的位置如下：[r1，g1，b1，a1，r2，g2，b2，a2 ...]。 現在，我已經在Java中使用了類似的數組，但是這里返回的像素是這樣的：[r1，r2，g1，g2，b1，b2，a1，a2]這使得使用遮罩獲取值成為可能。 。 由於JS中的代碼不同，因此我使用以下函數從數組中提取值並在編輯后進行設置：

 ImageClass.prototype.getRed = function(temp){
   return imageData.pixels[temp];
 }

 ImageClass.prototype.setRed = function(r, temp){
   imageData.pixels[temp] = r;
 }

 ImageClass.prototype.getGreen = function(temp){
   return imageData.pixels[Number(temp)+1];
 }

 ImageClass.prototype.setGreen = function(g, temp){
   imageData.pixels[Number(temp)+1] = g;
 }

 ImageClass.prototype.getBlue = function(temp){
   return imageData.pixels[Number(temp)+2];
 }

 ImageClass.prototype.setBlue = function(b, temp){
   imageData.pixels[Number(temp)+2] = b;
 }

 ImageClass.prototype.getAlpha = function(temp){
   return imageData.pixels[Number(temp)+3];
 }

 ImageClass.prototype.setAlpha = function(a, temp){
   imageData.pixels[Number(temp)+3] = a;
 }

temp是一個整數值，代表一個索引。 現在我的問題是：雖然以下功能（紅色）有效，但下一個功能（綠色）無效。 我不知道為什么以及如何開始調試。

ImageClass.prototype.red = function(){
  this.getPixels();
  for (index = 0; index < imageData.pixelsLength; index += 4) {
    var g = this.getGreen(index);
    var b = this.getBlue(index);

    g = 0;
    b = 0;

    this.setGreen(g, index);
    this.setBlue(b, index);

  }
  this.draw();
}

ImageClass.prototype.green = function(){
  this.getPixels();
  for (index = 0; index < imageData.pixelsLength; index += 4) {
    var r = this.getRed(index);
    var b = this.getBlue(index);

    r = 0;
    b = 0;

    this.setRed(r, index);
    this.setBlue(b, index); 
  }
  this.draw();
}

getPixels（）函數僅使像素數組全局可用（在命名空間中）。 繪圖功能確實可以如其名稱所說的那樣工作。

如果有人知道從數組中提取像素的簡便方法，以便我可以訪問所有紅色，所有綠色等。我歡迎您提出建議。

提前致謝。

Answer 1

您可以刪除對getGreen和getBlue的調用，因為無論如何它們都將覆蓋它們。

輕微修改

ImageClass.prototype.red = function(){
  this.getPixels();
  for (index = 0; index < imageData.pixelsLength; index += 4) {
    var g = 0, b = 0;

    this.setGreen(g, index);
    this.setBlue(b, index);

  }
  this.draw();
}

避免使用ImageClass.prototype.getRed等。

如果您想要一個非常簡單的方法，則可以執行以下操作：

offsets {r: 0, g: 1, b: 2, a: 3}

ImageClass.prototype.red = function(){
  this.getPixels();
  for (index = 0; index < imageData.pixelsLength; index += 4) {
      imageData.pixels[index+offsets.g] = 0;
      imageData.pixels[index+offsets.b] = 0;
  }
  this.draw();
}

簡單而完整的選擇

您可以通過生成這些函數來避免重復代碼。

offsets {r: 0, g: 1, b: 2, a: 3}

function MakeColorFunction(omit1, omit2){
  return (function(){
    this.getPixels();
    for (index = 0; index < imageData.pixelsLength; index += 4) {
      imageData.pixels[index+offsets[omit1]] = 0;
      imageData.pixels[index+offsets[omit2]] = 0;
    }
    this.draw();
  });
}

ImageClass.prototype.red = MakeColorFunction("g", "b");
ImageClass.prototype.green = MakeColorFunction("b", "r");
ImageClass.prototype.blue = MakeColorFunction("r", "g");