JavaScript图像模糊函数效果不稳定，请求排查与解决

问题根源 #

• 参数误用：nearby函数硬编码使用全局变量image1获取宽高，而非传入的image参数，逻辑混乱且复用性差。
• 坐标边界处理错误：
  • 有效像素坐标范围应为0 ≤ x < 图像宽度、0 ≤ y < 图像高度，原代码判断条件newX > image1.getWidth()错误，应为newX >= image.getWidth()，y轴同理。
  • 超出边界时直接加减5的修正逻辑无效，无法保证坐标在有效范围内；随机生成的坐标是浮点数，未取整就传入getPixel会导致定位错误。
• 变量未声明：blur函数中x、y未用var/let声明，成为全局变量，可能引发意外冲突。
• 随机偏移失控：错误的边界处理导致实际偏移范围超出预设的±5像素，模糊效果随机性不可控。

修复后的代码 #

function nearby(image, x, y) {
  // 生成-5到5之间的整数偏移量
  var offsetX = Math.floor(Math.random() * 11) - 5;
  var offsetY = Math.floor(Math.random() * 11) - 5;
  
  var newX = x + offsetX;
  var newY = y + offsetY;
  
  // 将坐标截断到有效范围
  newX = Math.max(0, Math.min(newX, image.getWidth() - 1));
  newY = Math.max(0, Math.min(newY, image.getHeight() - 1));
  
  return image.getPixel(newX, newY);
}

function blur(image) {
  var output = new SimpleImage(image.getWidth(), image.getHeight());
  for (var pixel of image.values()) {
    let x = pixel.getX();
    let y = pixel.getY();
    var orgPixel = image.getPixel(x, y);
    
    if (Math.random() < 0.5) {
      var other = nearby(image, x, y);
      output.setPixel(x, y, other);
    } else {
      output.setPixel(x, y, orgPixel);
    }
  }
  return output;
}

var image1 = new SimpleImage("duvall.jpg");
var blurredImage = blur(image1);
print(blurredImage);

修复说明 #

• 参数逻辑修正：nearby函数改用传入的image参数获取宽高，保证函数通用性。
• 坐标处理优化：用Math.floor将随机偏移转为整数，通过Math.max/Math.min直接截断坐标到有效范围，确保每次取到的都是合法像素。
• 变量规范：blur函数中x、y用let声明，避免全局变量污染。
• 函数封装优化：将output对象移到blur函数内部，减少全局依赖，提升函数独立性。
• 效果稳定化：修正后的偏移逻辑严格控制在±5像素范围内，模糊效果的随机性可控，不会出现异常偏移导致的不稳定情况。

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