手把手教你怎么给图片加马赛克

1. 前言

马赛克（Mosaic）是一种对图片进行处理的方式，它可以将图片中的某些部分逐渐模糊化，以达到保护隐私或者隐藏敏感信息的目的。那么，怎样才能给图片加上马赛克呢？接下来，我们就来一步步讲解。

2. 加载图片

2.1 先在网页中添加一个 canvas 元素

Canvas 可以被用来在网页中绘制图像，首先我们调用 document.createElement() 函数来创建一个 Canvas 元素，并设置它的宽度和高度，在 id 为 image-container 的元素中插入该 Canvas 元素。

let canvas = document.createElement('canvas');

canvas.width = 600; // 设置canvas宽度
canvas.height = 400; // 设置canvas高度
document.getElementById('image-container').appendChild(canvas); // 把canvas添加到image-container元素中

2.2 加载图片到 canvas 元素

在这里，我们可以使用canvas的getContext('2d')API来获取一个CanvasRenderingContext2D对象，然后我们可以使用这个对象的drawImage()方法来把图片加载到canvas元素中。

let canvas = document.createElement('canvas');

canvas.width = 600; // 设置canvas宽度
canvas.height = 400; // 设置canvas高度
document.getElementById('image-container').appendChild(canvas); // 把canvas添加到image-container元素中
let ctx = canvas.getContext('2d');
let img = new Image();
img.onload = function() {
  ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
};
img.src = 'path/to/image.jpg'; // 设置图片路径

3. 给图片加马赛克

3.1 获取马赛克的大小

马赛克的大小可以通过鼠标的滑动来控制，我们可以在页面中添加一个滑动条，然后通过监听它的改变来获取马赛克的大小。

let slider = document.getElementById('slider');

let mosaicSize = slider.value; // 获取马赛克大小
slider.oninput = function() {
  mosaicSize = this.value;
  drawMosaic(ctx, img, mosaicSize); // 重新绘制马赛克图片
};

3.2 绘制马赛克图片

我们可以将整个画布分割成大小为mosaicSize的小正方形，然后每个小正方形的填充颜色为该正方形区域内所有像素颜色的平均值。

function drawMosaic(ctx, img, mosaicSize) {

  ctx.clearRect(0, 0, canvas.width, canvas.height);
  for (let y = 0; y <= img.height - mosaicSize; y += mosaicSize) {
    for (let x = 0; x <= img.width - mosaicSize; x += mosaicSize) {
      let data = ctx.getImageData(x, y, mosaicSize, mosaicSize).data;
      let color = getAverageColor(data);
      ctx.fillStyle = 'rgb(' + color.join(',') + ')'; // 设置填充颜色
      ctx.fillRect(x, y, mosaicSize, mosaicSize); // 填充矩形
    }
  }
}
function getAverageColor(data) {
  let sum = [0, 0, 0];
  for (let i = 0; i < data.length; i += 4) {
    sum[0] += data[i];
    sum[1] += data[i + 1];
    sum[2] += data[i + 2];
  }
  return [ Math.round(sum[0] / (data.length / 4)), Math.round(sum[1] / (data.length / 4)), Math.round(sum[2] / (data.length / 4)) ];
}

4. 总结

通过以上步骤，我们就可以完成给图片加马赛克的过程。这个过程虽然看起来有一些繁琐，但是只要一步一步来，就不会觉得难。希望本文对大家有所帮助。