毛玻璃效果-前端怎么写

毛玻璃效果是一种常见的图像处理效果，可用于美化图片和背景。在前端实现毛玻璃效果，可以使用CSS滤镜或Canvas绘图等方式。

使用CSS滤镜实现毛玻璃效果：

.blur {
  filter: blur(5px);
}

使用Canvas绘图实现毛玻璃效果：

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
const img = new Image();
img.src = 'image.jpg';
img.onload = function() {
  canvas.width = img.width;
  canvas.height = img.height;
  ctx.drawImage(img, 0, 0);
  const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
  const data = imageData.data;
  for (let i = 0; i < data.length; i += 4) {
    const r = data[i];
    const g = data[i + 1];
    const b = data[i + 2];
    const alpha = data[i + 3];
    const rand = Math.random() * 20;
    data[i] = r + rand;
    data[i + 1] = g + rand;
    data[i + 2] = b + rand;
  }
  ctx.putImageData(imageData, 0, 0);
};

以上代码会在Canvas上绘制一张图片，并使用随机值对每个像素点的RGB颜色值进行微调，实现毛玻璃效果。