我正在参加「兔了个兔」创意投稿大赛，详情请看：「兔了个兔」创意投稿大赛

前言

此次大赛为大家准备一个可以改变兔子的像素的作品.

知识准备

canvas像素操作

在 canvas 中可以使用 context.drawImage(image,dx,dy) 方法将图片绘制在 canvas 上。将图片绘制上去后，还可以使用 context.getImageData(sx, sy, sw, sh) 方法获取 canvas 区域隐含的像素数据，该方法返回一个 ImageData 对象，里面包含的是 canvas 像素信息。

getImageData函数参数

这个函数有四个参数，都是必选的。格式：context.getImageData(sx, sy, sw, sh)。其中：

sx：将要被提取的图像数据矩形区域的左上角 x 坐标；
sy：将要被提取的图像数据矩形区域的左上角 y 坐标；
sw：将要被提取的图像数据矩形区域的宽度；
sy：将要被提取的图像数据矩形区域的高度；

ImageData对象

width:canvas的宽度
heigth:canvas的高度
data:指定区域的像素数据

image.data中的像素数据是一个一维正整数数组，一个像素信息包含 RGB 三原色信息和透明度。data 数组数据每四个为一组，分别表示 RGB 通道和透明度。这四种值取值都在 0-255 之间。

putImageData() 方法

该方法可以将 imageData 对象绘制到 canvas 上。我们可以用 getImageData 将获取到的 imageData 数据处理后再使用 putImageData 方法重新绘制到 canvas 中。该方法的参数：ctx.putImageData(imagedata, dx, dy);

dx:源图像数据在目标画布中的 x 轴方向的偏移量
dy:源图像数据在目标画布中的 y 轴方向的偏移量；

创造

灰色处理

function handle1(imageData) {
  var data = imageData.data;
  var len = data.length;

  for (let i = 0; i < len; i += 4) {
    var avg = 0;
    for (let j = 0; j < 3; j++) {
      // RGB 颜色值求平均
      avg += (data[i + j] / 3);
    }
    // 把平均值付给 RGB
    data[i] = data[i + 1] = data[i + 2] = avg;
  }
  return imageData;
}

红色处理

  var data = imageData.data;
  var len = data.length;
  for (let i = 0; i < len; i += 4) {
    let sum = 0;
    for (let j = 0; j < 3; j++) {
      sum += data[i + j];
    }
    var avg = sum / 3;
    data[i] = avg; // 红色是平均值
    // 绿色和蓝色都设为零
    data[i + 1] = data[i + 2] = 0;
  }
  return imageData;
}

黑白处理

function handle3(imageData) { var data = imageData.data; var len = data.length;

for(let i = 0;i < len;i += 4){
    var avg = 0;
    for(let j = 0;j < 3;j ++){
        avg += (data[i + j] / 3);
    }
    //！判断
    data[i] = data[i + 1] = data[i + 2] = avg < 128 ? 0 : 255;
}
return imageData;

}

结果:

兔子的像素操作

前言