使用JavaScript实现点击图片指定区域像素化（仿PS马赛克效果）

感谢phun-ky的帮助，我已完成页面稳定化处理，移除了代码中的动画效果。现需将原有的鼠标悬停全图像素化功能，修改为点击图片指定位置时，仅对该区域进行像素化处理，效果需类似Photoshop中的「滤镜›像素化›马赛克」。恳请提供解决方案或建议。

修改后的完整代码 #

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Local Pixelate Image</title>
  <style>
    canvas {
      border: 1px solid black;
      cursor: crosshair;
    }
  </style>
</head>

<body>
  <canvas id="canvas" width="500" height="500"></canvas>
  <script>
    var canvas = document.getElementById('canvas'),
      ctx = canvas.getContext('2d'),
      img = new Image();

    // 关闭图像平滑，保证像素化效果清晰
    ctx.mozImageSmoothingEnabled = false;
    ctx.webkitImageSmoothingEnabled = false;
    ctx.imageSmoothingEnabled = false;

    img.src = 'http://i.imgur.com/w1yg6qo.jpg';
    img.onload = function() {
      // 初始绘制原始图像
      ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
    };

    // 局部像素化函数
    function pixelateArea(x, y, pixelSize = 10, areaSize = 80) {
      // 1. 先重新绘制原始图像，避免多次点击叠加像素化（若需保留多次效果可注释此行）
      ctx.drawImage(img, 0, 0, canvas.width, canvas.height);

      // 计算区域的左上角坐标（让点击位置在区域中心）
      const startX = x - areaSize / 2;
      const startY = y - areaSize / 2;

      // 2. 将目标区域缩小绘制到画布临时区域
      const scaledW = areaSize / pixelSize;
      const scaledH = areaSize / pixelSize;
      ctx.drawImage(img, startX, startY, areaSize, areaSize, 0, 0, scaledW, scaledH);

      // 3. 将缩小后的图像放大绘制回原区域，实现马赛克效果
      ctx.drawImage(canvas, 0, 0, scaledW, scaledH, startX, startY, areaSize, areaSize);
    }

    // 点击事件处理
    canvas.addEventListener('click', function(e) {
      // 获取点击位置相对于画布的坐标
      const rect = canvas.getBoundingClientRect();
      const x = e.clientX - rect.left;
      const y = e.clientY - rect.top;
      // 调用局部像素化，可调整pixelSize（像素块大小）和areaSize（区域大小）
      pixelateArea(x, y, 10, 80);
    }, false);
  </script>
</body>

</html>

核心实现说明 #

• 点击坐标获取：通过getBoundingClientRect()计算鼠标点击位置相对于画布的真实坐标，避免页面滚动或边框导致的偏移
• 局部像素化逻辑：
  1. 先绘制原始图像重置画布（如果需要保留多次点击的马赛克效果，可删除这一步）
  2. 把目标区域的图像缩小到极低分辨率，利用关闭平滑的设置让像素块清晰
  3. 将缩小后的低分辨率图像放大绘制回原区域，形成马赛克效果
• 可调整参数：
  • pixelSize：控制像素块的大小，数值越大马赛克效果越明显
  • areaSize：控制每次点击像素化的区域范围，可根据需求调整

内容的提问来源于stack exchange，提问作者Adoltchus