canvas像素级操作

前言

课件地址

github.com/buglas/canv…

课堂目标

1.理解ImageData() 对象的获取方式。

2.可以灵活操作像素。

知识点

1.ImageData() 对象

2.在canvas 中显示ImageData

3.操作像素

1-ImageData() 对象

1-1-ImageData 是什么？

ImageData 是图片的数据化，它具备以下属性：

• data：Uint8ClampedArray [r,g,b,a, r,g,b,a, r,g,b,a, r,g,b,a]
• width：整数
• heidth：整数

注：Uint8ClampedArray 翻译过来是 8位无符号整型固定数组，其取值范围是[0,255]。若小于0，则为0，大于255，则为255。若为小数，则取整，取整的方法是银行家舍入。

1-2-怎么拿到 ImageData() 对象？

1.直接建立ImageData() 对象（相当于自己新建了一张图片）。

new ImageData()
new ImageData(width, height)  
new ImageData(Uint8ClampedArray, width, height)

ctx.createImageData()
ctx.createImageData(width, height)
ctx.createImageData(ImageData)

2.获取canvas 的ImageData() 对象（可以以此原理获取真实图片的数据）

ctx.getImageData(x, y, width, height)

2-在canvas 中显示ImageData

putImageData(ImageData, dx, dy, x, y, w, h) 将ImageData 对象显示在canvas 画布之中。

代码示例：

const canvas=document.getElementById('canvas');
//canvas充满窗口
canvas.width=window.innerWidth;
canvas.height=window.innerHeight;
const ctx=canvas.getContext('2d');

const img=new Image();
img.src='./images/dog.jpg';
img.onload=function(){
  //获取图片宽高
  const {width,height}=img;

  /*1.在canvas 中绘制图像*/
  ctx.drawImage(img,0,0);

  /*2.从canvas 中获取图像的ImageData*/
  const imgData=ctx.getImageData(0,0,width,height);

  /*3.在canvas 中显示ImageData*/
  ctx.putImageData(
    imgData,
    //位置
    0,height,
    //裁剪
    150,150,
    100,100
  )
};

3-操作像素

3-1-理解 ImageData 中的像素集合和图像栅格的对应关系

ImageData 对象的属性：

• data：Uint8ClampedArray [0,1,2,3, 4,5,6,7,8,9,10,11,12,13,14,15]
• width：2
• heidth：2

3-2-遍历像素集合的方法

• 逐像素遍历：每隔4 个数据遍历一次，简单快捷。

for(let i=0;i<arr.length;i+=4){
  let r=data[i+0];
  let g=data[i+1];
  let b=data[i+2];
  let a=data[i+3];
  console.log(r,g,b,a)
}

• 行列遍历：基于行列遍历，可获取像素点的位置信息。

for(let y=0;y<h;y++){
  for(let x=0;x<w;x++){
    let ind=(y*w+x)*4;
    let r=data[ind];
    let g=data[ind+1];
    let b=data[ind+2];
    let a=data[ind+3];
    console.log(r,g,b,a)
  }
}