跳到主要内容

getImageData

2024年06月19日
柏拉文
越努力，越幸运

一、认识​

getImageData() 返回一个 ImageData 对象，用来描述 canvas 区域隐含的像素数据，这个区域通过矩形表示，起始点为 (sx, sy)、宽为sw、高为sh

二、语法​

const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');

const imageData = ctx.getImageData(sx, sy, sw, sh);

  • sx: 将要被提取的图像数据矩形区域的左上角 x 坐标。

  • sy: 将要被提取的图像数据矩形区域的左上角 y 坐标。

  • sw: 将要被提取的图像数据矩形区域的宽度。

  • sh: 将要被提取的图像数据矩形区域的高度。

三、场景​

3.1 获取画布像素数据​

const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');

const imageData = ctx.getImageData(0,0,canvas.width,canvas.height);

3.2 获取特定画布部分像素数据​

const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');

const imageData = ctx.getImageData(left, top, width, height);

3.3 获取鼠标位置处的像素数据​

const canvas = document.createElement("canvas");
const ctx = canvas.getContext("2d");

const img = new Image();
img.onload = function () {
  canvas.width = this.naturalWidth;
  canvas.height = this.naturalHeight;
  ctx.drawImage(this, 0, 0);
};
img.src = "../../images/41cd22ab-9fee-45d4-92a0-722d9ee7fd29-1.png";

document.body.appendChild(canvas);

function getPointPixel(event) {
  const x = event.offsetX;
  const y = event.offsetY;
  const pixel = ctx.getImageData(x, y, 1, 1).data;
  const rgba = `rgba(${pixel[0]}, ${pixel[1]}, ${pixel[2]}, ${pixel[3] / 255})`;

  return { pixel, rgba };
}

canvas.addEventListener("click", function (event) {
  const { pixel, rgba } = getPointPixel(event);
  console.log("pixel", pixel, "rgba", rgba);
});