一、什么是getimagedata
在Canvas中我们可以通过getImageData获取Canvas上某一区域的像素数据信息,该方法返回一个ImageData对象,包含了指定矩形区域每个像素点的RGBA值。
ImageData对象有三个属性:width、height和data,其中width和height表示图像的宽和高,data则是一个Uint8ClampedArray类型的数组对象,它包含以RGBA的形式表示每个像素颜色值。
二、如何使用getimagedata方法
使用Canvas绘制一个图像或者图片,获取到其上任意一个或者多个连续的像素区域,可以通过全局对象CanvasRenderingCtx2D的getImageData() 方法来获取指定像素区域的信息,getImageData() 方法可以使用四个参数: x,y是要获取像素数据的矩形左上角的坐标,width,height是矩形的高度和宽度,如下所示:
var imageDataObject = context.getImageData(x,y,width,height); var data = imageDataObject .data;
data是一个Uint8ClampedArray类型的数组对象,包含了指定矩形区域每个像素点的RGBA值,数组中每四个连续元素表示一个像素点的颜色,依次表示该像素点的红色、绿色、蓝色、和透明度值。
三、示例
下面的示例,我们将通过获取Canvas上的像素数据进行图像增强,增加图片的亮度、对比度和饱和度。
var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); var img = new Image(); img.onload = function() { ctx.drawImage(img, 0, 0, canvas.width, canvas.height); var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height); var data = imageData.data; var contrast = 128; // 对比度值 var brightness = 50; // 亮度值 var saturation = 2; // 饱和度值 // 遍历每一个像素点 for (var i = 0; i < data.length; i += 4) { // 获取像素点的原始颜色值 var r = data[i]; var g = data[i + 1]; var b = data[i + 2]; // 转换为HSV颜色模式 var hsv = rgb2hsv(r, g, b); // 增加亮度和对比度 var h = hsv.h; var s = hsv.s; var v = hsv.v + brightness; if (v < 0) { v = 0; } if (v > 255) { v = 255; } // 对比度变化 if (contrast > 0) { v = ((v - 128) * contrast / 128) + 128; } else { v = (v * (128 + contrast)) / 128; } // 饱和度变化 s = s * saturation; if (s > 1) { s = 1; } // 转换回RGB颜色模式 var rgb = hsv2rgb(h, s, v); // 将像素点的颜色设置为新的颜色 data[i] = rgb.r; data[i + 1] = rgb.g; data[i + 2] = rgb.b; } // 将新的像素数据放回Canvas ctx.putImageData(imageData, 0, 0); }; img.crossOrigin = "Anonymous"; img.src = "image_url"; function rgb2hsv(r, g, b) { r = r / 255; g = g / 255; b = b / 255; var max = Math.max(r, g, b), min = Math.min(r, g, b), h, s, v = max, d = max - min; if (max == 0) s = 0; else s = d / max; if (max == min) { h = 0; // achromatic } else { switch (max) { case r: h = (g - b) / d + (g < b ? 6 : 0); break; case g: h = (b - r) / d + 2; break; case b: h = (r - g) / d + 4; break; } h /= 6; } return { h: h, s: s, v: v }; } function hsv2rgb(h, s, v) { var r, g, b, i, f, p, q, t; if (s == 0) { return { r: v, g: v, b: v }; } h *= 6; i = Math.floor(h); f = h - i; p = v * (1 - s); q = v * (1 - f * s); t = v * (1 - (1 - f) * s); switch (i % 6) { case 0: r = v, g = t, b = p; break; case 1: r = q, g = v, b = p; break; case 2: r = p, g = v, b = t; break; case 3: r = p, g = q, b = v; break; case 4: r = t, g = p, b = v; break; case 5: r = v, g = p, b = q; break; } return { r: Math.round(r), g: Math.round(g), b: Math.round(b) }; }
四、总结
使用Canvas提供的getImageData方法,可以获取到Canvas上指定区域的像素数据,并能够进行灵活的处理。开发者可以通过对RGBA值的增、删、改、查等操作,实现各式各样的图像处理需求。