一、什么是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 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值的增、删、改、查等操作，实现各式各样的图像处理需求。
原创文章，作者：BRTWQ，如若转载，请注明出处：https://www.506064.com/n/313358.html
微信扫一扫 
支付宝扫一扫 