使用 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 比较方便且功能比较多 😁。