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 像素大小的小画布: