4.canvas ImageData对象

1.创建一个ImageData对象

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

  所有像素被预设为透明黑 image.png
• var myImageData = ctx.createImageData(another ImageData)
  创建一个被anotherImageData对象指定的相同像素的ImageData对象。这个新的对象像素全部被预设为透明黑。这个并非复制了图片数据

2.得到场景像素数据

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

  let canvas = document.getElementById('canvas');
  let ctx = canvas.getContext('2d');
  let sun = new Image();
  sun.onload = function () {
    ctx.drawImage(sun,0,0);
    //imageData
    let imageData = ctx.getImageData(0,0,canvas.width,canvas.height);
    console.log(imageData)

  }
  sun.src = './Canvas_sun.png';

image.png
data属性返回一个 Uint8ClampedArray，它可以被使用作为查看初始像素数据。每个像素用4个1bytes值(按照红，绿，蓝和透明值的顺序; 这就是"RGBA"格式) 来代表。每个颜色值部份用0至255来代表。每个部份被分配到一个在数组内连续的索引，左上角像素的红色部份在数组的索引0位置。像素从左到右被处理，然后往下，遍历整个数组。

如何通过具体位置信息读取其像素值呢？
(200,50) 位置处的蓝色像素信息：
let blue = imageData.data[((50-1)*imageData.width + (200-1))*4 - 1 + 3];
根据行、列读取某像素点的R/G/B/A值的公式：
imageData.data[((行数-1)*imageData.width + (列数-1))*4 - 1 + 1/2/3/4];

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

image.png

3.写入像素数据

ctx.putImageData(myImageData, dx, dy);
dx和dy参数表示你希望在场景内左上角绘制的像素数据所得到的设备坐标

  let canvas = document.getElementById('canvas');
  let ctx = canvas.getContext('2d');
  let sun = new Image();
  sun.onload = function () {
    ctx.drawImage(sun,0,0);
    //imageData
    let imageData = ctx.getImageData(0,0,canvas.width,canvas.height);
    
    //putImageData
    ctx.putImageData(imageData,200,200)

  }
  sun.src = './Canvas_sun.png';

image.png

可以将数据操作后再放入场景（将上述图形色值取反）：

  let canvas = document.getElementById('canvas');
  let ctx = canvas.getContext('2d');
  let sun = new Image();
  sun.onload = function () {
    ctx.drawImage(sun,0,0);
    //imageData
    let imageData = ctx.getImageData(0,0,canvas.width,canvas.height);
    
    for (let i = 0;i < imageData.data.length; i += 4){
      imageData.data[i]     = 255 - imageData.data[i];     // red
      imageData.data[i + 1] = 255 - imageData.data[i + 1]; // green
      imageData.data[i + 2] = 255 - imageData.data[i + 2]; // blue
    }
    //putImageData
    ctx.putImageData(imageData,200,200)

  }
  sun.src = './Canvas_sun.png';

image.png

4.保存为图片

canvas.toDataURL()