Canvas 學(xué)習(xí)筆記之像素操作 -- by Damon

像素操作

ctx.createImageData(width, height) 
ctx.createImageData(anotherImageData)
ctx.getImageData(x, y, w, h)
// (x, y) => start point
// (w, h) => width and height 
ctx.putImageData(myImageData, x, y)
// (x, y) => destination position

ImageData 對(duì)象
width: Number
height: Number
data: Array 0, 1, 2, 3 => 每四個(gè)一組表示rgba

應(yīng)用： ctx.getImageData(x, y, 1, 1) => 就可以獲取某個(gè)點(diǎn)點(diǎn)色值

高級(jí)應(yīng)用-圖片灰度和反相

Paste_Image.png

Paste_Image.png

function invert(data) {
  for (var i = 0; i < data.length; i += 4) {
    data[i] = 255 - data[i];
    data[i + 1] = 255 - data[i + 1];
    data[i + 2] = 255 - data[i + 2];
  }
  return data;
}

var grayscale = function(data) {
  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
  }
  return data;
};

ImageData.data => Uint8ClampedArray 0～255整型的數(shù)組
參考鏈接

代碼地址
Demo地址