從線性陣列中獲取相鄰像素（如context.getImageData中）

我有一個中間有一個紅色實心圓圈的影像。我想讀取該影像，分析像素，然后僅將圓圈的輪廓寫回畫布。所以我正在檢查該像素是否被紅色通道值為 255 的像素包圍。如果是，我將其設為透明。如果沒有，我將像素著色為青色。

我使用了

代碼：

<img alt="input" height="170" id="input" src="img/input.png" width="170">
<canvas height="170" id="myCanvas" style="border:1px solid #d3d3d3;" width="170"></canvas>

let neighbors = []

  function isSurrounded(index, imageData, data) {
    neighbors = [] // clear array
    neighbors[0] = data[index - imageData.width * 4 - 4] // Upper left
    neighbors[1] = data[index - imageData.width * 4]     // Upper middle
    neighbors[2] = data[index - imageData.width * 4   4] // Upper right
    neighbors[3] = data[index - 4] // left
    neighbors[4] = data[index   4] // right
    neighbors[5] = data[index   imageData.width * 4 - 4] // Lower left
    neighbors[6] = data[index   imageData.width * 4]     // lower middle
    neighbors[7] = data[index   imageData.width * 4   4] // Lower right

    // check red channel
    for (let i = 0; i < neighbors.length; i  ) {
      let redPixel = neighbors[i]
      if (redPixel !== 255) {
        return false
      }
    }
    return true
  }

  let img = document.getElementById("input")
  img.onload = function () {
    let c = document.getElementById("myCanvas")
    let ctx = c.getContext("2d")
    ctx.drawImage(img, 0, 0)
    let imgData = ctx.getImageData(0, 0, c.width, c.height)
    let pxl = imgData.data
    for (let i = 0; i < pxl.length; i  = 4) {
      if (isSurrounded(i, imgData, pxl)) {
        pxl[i] = 0
        pxl[i   1] = 255
        pxl[i   2] = 255
        pxl[i   3] = 255
      } else {
        pxl[i   3] = 0
      }
    }
    ctx.putImageData(imgData, 0, 0)
  }

uj5u.com熱心網友回復：

也許不同的方法會奏效。我沒有為此使用實際影像來處理安全問題，但該程序應該仍然有效。

處理時我喜歡做的第一件事img.data是創建一個陣列，為每個像素提供自己的陣列；一個二維陣列。即 [[0, 0, 0, 0,], [255, 0, 255, 0]...]。就我個人而言，它更容易處理。

  let imgData = ctx.getImageData(0, 0, c.width, c.height);
  let data = imgData.data.reduce(
    (pixel, key, index) =>
      (index % 4 == 0
        ? pixel.push([key])
        : pixel[pixel.length - 1].push(key)) && pixel,
    []
  );

無論您如何處理data陣列（1d 或 2d），您都需要檢查左-右-上-下的像素的透明度是否為 0。現在，如果您使用的影像沒有透明度，那么您我需要糾正這一點。畫布會自動透明，直到您在其上著色。

for (let i = 0; i < data.length; i  ) {
    if (data[i][0] >= 250 && data[i   1][3] === 0) {
      data[i][0] = 0;
      data[i][1] = 0;
      data[i][2] = 255;
      data[i][3] = 255;
}

雖然我用純紅色給我的圓圈涂上了顏色，但在邊緣附近的情況下，該r值不會是 255，但可能會略低一些。我也想看看右邊的像素是否透明。如果是，那么這意味著它必須在圓的邊緣。對所有方面都這樣做，如果為真，我將像素設定為藍色。

完成后，我可以遍歷陣列并將所有剩余的紅色像素更改為透明。

data.forEach((px) => {
    if (px[0] >= 250) {
      px[0] = 0;
      px[1] = 0;
      px[2] = 0;
      px[3] = 0;
    }
  });

現在我們需要創建一個新的影像資料，并在繪制它之前將我們的新陣列設定為它的資料。我flat()在這里使用是因為我的資料陣列是 2d 的，為此我們需要它是 1d。

  let newImage = ctx.createImageData(170, 170);
  newImage.data.set(data.flat());
  ctx.putImageData(newImage, 0, 0);

現在你應該有一個輪廓圓

let c = document.getElementById("myCanvas");
let ctx = c.getContext("2d");

function drawCircle() {
  ctx.fillStyle = "red";
  ctx.arc(c.width / 2, c.height / 2, 70, 0, Math.PI * 2);
  ctx.fill();
}
drawCircle();

window.onload = function () {
  let imgData = ctx.getImageData(0, 0, c.width, c.height);
  let data = imgData.data.reduce(
    (pixel, key, index) =>
      (index % 4 == 0
        ? pixel.push([key])
        : pixel[pixel.length - 1].push(key)) && pixel,
    []
  );
  for (let i = 0; i < data.length; i  ) {
    if (data[i][0] >= 250 && data[i   1][3] === 0) {
      data[i][0] = 0;
      data[i][1] = 0;
      data[i][2] = 255;
      data[i][3] = 255;
    }
    if (data[i][0] >= 250 && data[i - 1][3] === 0) {
      //  console.log(data[i-1])
      data[i][0] = 0;
      data[i][1] = 0;
      data[i][2] = 255;
      data[i][3] = 255;
    }
    if (data[i][0] >= 250 && data[i - 170][3] === 0) {
      data[i][0] = 0;
      data[i][1] = 0;
      data[i][2] = 255;
      data[i][3] = 255;
    }
    if (data[i][0] >= 250 && data[i   170][3] === 0) {
      data[i][0] = 0;
      data[i][1] = 0;
      data[i][2] = 255;
      data[i][3] = 255;
    }
  }
  data.forEach((px) => {
    if (px[0] >= 250) {
      px[0] = 0;
      px[1] = 0;
      px[2] = 0;
      px[3] = 0;
    }
  });
  let newImage = ctx.createImageData(170, 170);
  newImage.data.set(data.flat());
  ctx.putImageData(newImage, 0, 0);
};

<canvas height="170" id="myCanvas" style="border:1px solid #d3d3d3;" width="170"></canvas>

標籤：javascript 图像处理 html5-canvas 像素

上一篇：opencv：如何合并近輪廓以獲得一個大的最外輪廓？

下一篇：錯誤概率-OpenCV影像分類