【canvas學習筆記八】像素操作

ImageData對象

ImageData對象包含了一個區域內的canvas的像素信息。它包含以下可讀屬性：

width
canvas的寬度，單位是像素。
height
canvas的高度，單位是像素。
data
一個Uint8ClampedArray的一維數組，包含了每個像素的RGBA值。

什麼是Uint8ClampedArray？這個數組裡的數值是8位的整型，而且值得範圍在0和255之間。任何不在[0, 255]之間的數都會變成[0, 255]之間最接近的那個整型數。
0到255之間，那記錄的自然是RGBA顏色數值啦。這個data數組是這樣排列的，data[0]是第一排第一列的像素R通道的數值，data[1]第一排第一列的像素G通道的數值，data[3]是第一排第一列的像素的Alpha通道的數值。而data[4]是第一排第二列的像素的R通道數值，以此類推。
比如說，第50排第200列的像素的藍色通道的值：

blueComponent = imageData.data[((50 * (imageData.width * 4)) + (200 * 4)) + 2];

另外，data也有length屬性，就是data數組的長度。

創建ImageData對象

有兩種方法創建ImageData：

var myImageData = ctx.createImageData(width, height);

var myImageData = ctx.createImageData(anotherImageData);

註意啦，方法二是不會把data屬性複製過去的，僅僅是複製了寬度和高度，data數組裡的像素信息都是透明黑的，也就是都是0。

獲取像素信息

可以用getImageData()方法獲取像素信息。

var myImageData = ctx.getImageData(left, top, width, height);

top和left就是所截取的畫布部分的左上角坐標。

Tip：
超過畫布區域返回的像素信息都是透明黑，也就是都是0。

例子

var img = new Image();
img.src = 'https://mdn.mozillademos.org/files/5397/rhino.jpg';
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
img.onload = function() {
  ctx.drawImage(img, 0, 0);
  img.style.display = 'none';
};
var color = document.getElementById('color');
function pick(event) {
  var x = event.layerX;
  var y = event.layerY;
  var pixel = ctx.getImageData(x, y, 1, 1);
  var data = pixel.data;
  var rgba = 'rgba(' + data[0] + ', ' + data[1] +
             ', ' + data[2] + ', ' + (data[3] / 255) + ')';
  color.style.background =  rgba;
  color.textContent = rgba;
}
canvas.addEventListener('mousemove', pick);

結果

滑鼠滑過就會顯示rgba值。

繪製像素

ctx.putImageData(myImageData, dx, dy);

這個方法可以傳入一個ImageData對象，然後把ImageData對象中的像素信息都畫出來。dx, dy是繪製的左上角坐標。
比如我們可以逐一改變ImageData對象中的值，從而改變了整個圖象的顏色，再把它畫出來。
這有什麼用呢？對於要對像素進行的操作來說，這很方便。比如反色、去色等操作。

例子

var img = new Image();
img.src = 'https://mdn.mozillademos.org/files/5397/rhino.jpg';
img.onload = function() {
  draw(this);
};

function draw(img) {
  var canvas = document.getElementById('canvas');
  var ctx = canvas.getContext('2d');
  ctx.drawImage(img, 0, 0);
  img.style.display = 'none';
  var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
  var data = imageData.data;
    
  var invert = function() {
    for (var i = 0; i < data.length; i += 4) {
      data[i]     = 255 - data[i];     // red
      data[i + 1] = 255 - data[i + 1]; // green
      data[i + 2] = 255 - data[i + 2]; // blue
    }
    ctx.putImageData(imageData, 0, 0);
  };

  var grayscale = function() {
    for (var i = 0; i < data.length; i += 4) {
      var avg = (data[i] + data[i + 1] + data[i + 2]) / 3;
      data[i]     = avg; // red
      data[i + 1] = avg; // green
      data[i + 2] = avg; // blue
    }
    ctx.putImageData(imageData, 0, 0);
  };

  var invertbtn = document.getElementById('invertbtn');
  invertbtn.addEventListener('click', invert);
  var grayscalebtn = document.getElementById('grayscalebtn');
  grayscalebtn.addEventListener('click', grayscale);
}

invert()反色函數將RGB通道的值用255減去，grayscale()去色函數將RGB通道的值進行平均，從而使顏色變成灰色。

結果

點擊grayscale按鈕圖片會變成灰色，點擊invert按鈕圖片會反色。
可以把代碼放進codepen里看看效果如何。

保存圖片

canvas可以將畫布保存成圖片鏈接，圖片鏈接可以用於標簽或者下載。

canvas.toDataURL('image/png')
預設轉換成的格式是png。
canvas.toDataURL('image/jpeg', quality)
也可以是別的圖片格式。quality是圖片品質，數值是0~1。0是最差的品質，1是最佳的品質。

也可以生成二進位對象：

canvas.toBlob(callback, type, encoderOptions)