使用 HTML <canvas> 讀取 Pixel 像素

使用 JavaScript 讀取 HTML 圖片 Pixel、Canvas 2D Context API 有三種屬性方式可繪製 createImageData, getImageData, putImageData 原始 Pixels 圖元保存在 ImageData 類型物件儲存三個屬性：width 寬度、height 高度和 data 數據。data 是 Uint8ClampedArray 包含每個像素的紅、綠、藍和透明度值，範圍是 0~255 數據類型為 CanvasPixelArray 包含像素的 R, G, B 範圍從 0 到 255 且包括 PNG 的 Alpha 從左到右，逐行從上到下排序。

https://dev.opera.com/articles/html5-canvas-basics/#pixelbasedmanipulation

嘗試以 Event 座標讀取部份像素

<canvas id="drawImagePixels"></canvas>

const canvas = document.getElementById("drawImagePixels");
canvas.setAttribute("height", 400);
canvas.setAttribute("width", 400);
const img = new Image();
img.src = "cherry-blossom.jpg";
img.onload = function () {
  canvas.getContext("2d").drawImage(img, 0, 0, 400, 400);
}

使用 drawImage 方法將載入的 img 影像物件畫到 <canvas> 元素裡面，使用 onload 事件處理以確定影像物件的載入情況。image 支援的格式如 PNG、GIF 或 JPEG 格式都能使用，當前瀏覽器於 <canvas> 畫布使用右鍵可另存圖片 PNG 格式。

ctx.drawImage(image, dx, dy, dWidth, dHeight);

dx, dy 影像物件 image 從 canvas 左上角的目標 X, Y 軸坐標。
dWidth, dHeight 對繪製的 image 進行縮放。如果未指定繪製時 image 寬度不會縮放。

JavaScript Event 座標讀取

使用事件 addEventListener 的 mousemove 方式，取得 <canvas> 畫布 X, Y 坐標。傳遞到 getImagePixels 函數處理，依滑鼠坐標讀取 getImageData 範圍 20, 20 為 Uint8ClampedArray(1600) 圖片的資料結構一個元素儲存四個數字 R, G, B, A 一個像素的紅、綠、藍、Alpha，圖片使用 JPEG 格式 Alpha = 255。

function getImagePixels(X, Y) {
  let imgd = canvas.getContext("2d").getImageData(X, Y, 20, 20);
  let pix = imgd.data;
  var htmlResult = "";
  for (var i = 0, n = pix.length; i < n; i += 4) {
    htmlResult += ("<li style='background-color:rgb(" + pix[i] + "," + pix[i + 1] + "," + pix[i + 2] + ");'></li>");
  }
  const pixelsResult = document.querySelector("div.pixels-result");
  pixelsResult.innerHTML = "<ul>" + htmlResult + "</ul>";
}

canvas.addEventListener("mousemove", function (event) {
  let eventX = parseInt(event.clientX - canvas.getBoundingClientRect().left);
  let eventY = parseInt(event.clientY - canvas.getBoundingClientRect().top);
  getImagePixels(eventX, eventY);
}, false);

putImageData 輸出圖像數據

將圖像 Uint8ClampedArray 無符號整數陣列數據 ImageData 放到另一個 <canvas> 畫布裡面。
putImageData 是 Canvas 2D API 將數據從已有的 ImageData 對象繪製到點陣圖的方法。

ctx.putImageData(imagedata, dx, dy);

imageData 包含 ImageData 像素值的 Uint8ClampedArray 陣列對象。
dx, dy 圖像數據 ImageData 在目標 <canvas> 畫布中的 X, Y 位置偏移量。例如以下一個來源、另一個接收 ImageData 數據。

const canvasSource = document.getElementById("canvasSource");
let imgData = canvasSource.getContext("2d").getImageData(0, 0, 400, 400);

var pix = imgData.data;
for (var i = 0, n = pix.length; i < n; i += 4) {
  pix[i] = R + pix[i]; // Red 紅
  pix[i + 1] = G + pix[i + 1]; // Green 綠
  pix[i + 2] = B + pix[i + 2]; // Blue 藍
}

const canvasTarget = document.getElementById("canvasTarget");
canvasTarget.getContext("2d").putImageData(imgData, 0, 0);

使用 input type="range" 簡單的改變 RGB 色彩的 pix[i] 紅色、pix[i+1] 綠色、pix[i+2] 藍色變化。

以上僅是 HTML5 <canvas> 畫布 Pixel 像素的使用 getImageData, putImageData 影像物件測試。或許圖片的顏色、畫素調整還是使用 Adobe Photoshop 比較方便且功能比較多 😁。