getimagedata详解

一、什么是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值的增、删、改、查等操作，实现各式各样的图像处理需求。