context.getImageData 简介

Html5 Canvas 使你能够获取和更改画布上任何像素的颜色。

你可以使用 Canvas 的像素操作来:

  • 为图像创建颜色选择器或在色轮上选择颜色。
  • 创建复杂的图像滤镜,如模糊和边缘检测。
  • 在像素级别重新着色图像的任何部分(如果使用 HSL,你甚至可以在保留重要的光照和饱和度的同时重新着色图像,因此结果看起来不像是某人在图像上拍了一些油漆)。注意:Canvas 现在具有 Blend Compositing,在某些情况下也可以重新着色图像。
  • 敲除图像中某个人/项目周围的背景,
  • 创建一个油漆桶工具来检测和填充图像的一部分(例如,将用户点击的花瓣的颜色从绿色更改为黄色)。
  • 检查图像的内容(例如,面部识别)。

常见问题:

  • 出于安全原因,如果你绘制的图像源自与网页本身不同的域,则禁用 getImageData
  • getImageData 是一种相对昂贵的方法,因为它创建了一个大的像素数据阵列,因为它不使用 GPU 来协助它的工作。注意:Canvas 现在具有混合合成,可以执行与 getImageData 相同的像素操作。
  • 对于 .png 图像,getImageData 可能不会报告与原始 .png 文件完全相同的颜色,因为在画布上绘制图像时允许浏览器进行伽马校正和 alpha 预复制。

获得像素颜色

使用 getImageData 获取全部或部分画布内容的像素颜色。

getImageData 方法返回 imageData 对象

imageData 对象具有包含像素颜色信息的 .data 属性。

data 属性是 Uint8ClampedArray,包含所有请求像素的红色,绿色,蓝色和 Alpha(不透明度)颜色数据。

// determine which pixels to fetch (this fetches all pixels on the canvas)
var x=0;
var y=0;
var width=canvas.width;
var height=canvas.height;

// Fetch the imageData object 
var imageData = context.getImageData(x,y,width,height);

// Pull the pixel color data array from the imageData object
var pixelDataArray = imageData.data;

你可以在 data 数组中获取任何[x,y]像素的位置,如下所示:

// the data[] array position for pixel [x,y]
var n = y * canvas.width + x;

然后你可以像这样获取该像素的红色,绿色,蓝色和 alpha 值:

// the RGBA info for pixel [x,y]
var red=data[n];
var green=data[n+1];
var blue=data[n+2];
var alpha=data[n+3];

显示像素数据阵列的结构的插图

context.getImageData 如下图所示,适用于 2x3 像素大小的小画布:

StackOverflow 文档