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值的增、刪、改、查等操作，實現各式各樣的圖像處理需求。