用 JavaScript 局部失焦图像：像素化圆形、交互式控制与自定义选项

javascript

2024-03-15 00:17:58

像素化图像：用 JavaScript 让图片局部失焦

图像像素化是一种改变图像外观的强大技术，它可以创造迷人的效果，例如局部失焦和马赛克。通过 JavaScript，我们可以轻松实现像素化，从而赋予图像全新的外观。

像素化圆形

要实现像素化圆形效果，我们需要深入了解 JavaScript 的图像处理功能。首先，我们获取目标图像的数据，然后有选择地修改每个像素的值。

获取图像数据： getImageData() 方法可以获取图像特定区域的像素数据，为我们提供了操作图像的基础。

修改像素数据： 利用循环，我们可以遍历像素数据，根据我们的像素化参数修改每个像素的颜色值。

重新绘制图像： 一旦修改了像素数据，我们使用 putImageData() 方法将其重新绘制到图像中，完成像素化过程。

交互式像素化

为了让用户完全控制像素化效果，我们添加一个事件侦听器，当用户单击图像时触发像素化操作。这个侦听器捕捉点击位置并根据这些信息调用像素化函数。

完整代码示例

function pixelateCircle(ctx, x, y, radius) {
  // 获取像素数据
  var imageData = ctx.getImageData(x - radius, y - radius, radius * 2, radius * 2);
  var pixels = imageData.data;

  // 修改像素数据
  for (var i = 0; i < pixels.length; i += 4) {
    var distance = Math.sqrt(Math.pow(x - (i / 4) % (radius * 2) - radius, 2) + Math.pow(y - Math.floor(i / 4 / (radius * 2)) - radius, 2));
    if (distance <= radius) {
      // 修改像素值
    }
  }

  // 重新绘制图像
  ctx.putImageData(imageData, x - radius, y - radius);
}