前端线上图片生成马赛克

前言

说起图片的马赛克，可能一般都是由后端实现然后传递图片到前端，但是前端也是可以通过canvas来为图片加上马赛克的，下面就通过码上掘金来进行一个简单的实现。

实现

实现过程

思路

最开始需要实现马赛克功能是需要通过canvas提供的一个获取到图片每一个像素的方法，我们都知道，图片本质上只是由像素组成的，越清晰的图片，就有着越高的像素，而像素的本质，就只是一个个拥有颜色的小方块而已，只要把一张图片放大多倍，就能够清楚的发现。

canvas实现

通过 canvas 的 getImageData 这个方法，我们就能够拿到图像上所有像素组成的数组，并且需要生成马赛克，意味着我们需要把一个范围内的色块的颜色都改成一样的，也就是通过canvas来重绘图片，

 let pixeArr = ctx.getImageData(0, 0, w, h).data;
let sampleSize = 40;
 
for (let i = 0; i < h; i += sampleSize) {
    for (let j = 0; j < h; j += sampleSize) {
      let p = (j + i * w) * 4;
      ctx.fillStyle =
        "rgba(" +
        pix