运用场景

1、公司年会
2、兴趣

思路

百度搜剪影图片，然后100%比例绘制到canvas，再去获取canvas的点阵信息，重新用新的图片绘制到对应点阵，最后通过css动画实现鼠标悬浮放大头像的效果

实现步骤

将图片绘制到canvas中

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var image = new Image();
image.src = "cat.png";
image.onload = function () {
  canvas.width = image.width;
  canvas.height = image.height;
  ctx.drawImage(image, 0, 0);
}

获取并裁剪画布的点阵信息

getImageData() 方法返回 ImageData 对象，该对象拷贝了画布指定矩形的像素数据。 对于 ImageData 对象中的每个像素，都存在着四方面的信息，即 RGBA 值：

• R - 红色 (0-255)
• G - 绿色 (0-255)
• B - 蓝色 (0-255)
• A - alpha 通道 (0-255; 0 是透明的，255 是完全可见的) 笔记：
  color/alpha 以数组形式存在，并存储于 ImageData 对象的 [data]；画布每一个像素值分别对应此数组的4的倍数值，例如坐标（0, 0）对应的就是数组的0-3位，坐标（0, 1）对应的就是数组的4-7,以此类推,所以ImageData().data数组的长度 = canvas的宽x高x4

var imageData = ctx.getImageData(0, 0, image.width, image.height).data;
ctx.fillStyle = "#fff";
ctx.fillRect(0, 0, image.width, image.height);

var gap = 10;
for (var h = 0; h < image.height; h += gap) {
    for (var w = 0; w < image.width; w += gap) {
      var position = (image.width * h + w) * 4;
      var r = imageData[position];
      var g = imageData[position + 1];
      var b = imageData[position + 2];

      if (r + g + b == 0) {
        ctx.fillStyle = "#000";
        ctx.fillRect(w, h, 4, 4);
      }
    }
}

通过点阵信息生成头像气泡

ctx.clearRect(0, 0, image.width, image.height);   
var gap = 10;

var dragonContainer = document.getElementById("container");
var dragonScale = 2;
console.log(imageData)
var imgList = ["fuchuang.png","bubble.png"]
var imgKey = 0
for (var h = 0; h < image.height; h += gap) {
for (var w = 0; w < image.width; w += gap) {
  var position = (image.width * h + w) * 4;
  var r = imageData[position],
    g = imageData[position + 1],
    b = imageData[position + 2];

  if (r + g + b == 0) {
    var bubble = document.createElement("img");
    bubble.src = imgList[imgKey] || "bubble.png"
    bubble.setAttribute("class", "bubble");

    var bubbleSize = Math.random() * 10 + 20;
    bubble.style.left = w * dragonScale - bubbleSize / 2 + "px";
    bubble.style.top = h * dragonScale - bubbleSize / 2 + "px";
    bubble.style.width = bubble.style.height = bubbleSize + "px";
    bubble.style.animationDuration = Math.random() * 6 + 4 + "s";

    dragonContainer.appendChild(bubble);
    imgKey += 1
  }
}
}

完整代码仓库地址

github.com/wanglingzhi…