是什么在带纹理的过滤图像中造成这种伪像

Question

我正在为图像实现纹理过滤器，输出会产生伪像，高质量的图像会产生较少的伪像，而低质量的图像会产生更多的伪像，灰度图像似乎也产生较少的伪像。 可能是什么原因造成的？

所有图像必须以与高分辨率彩色图像相同的方式输出。

灰度图像（高分辨率） https://imgur.com/6v9Earj

彩色图像（低分辨率） https://imgur.com/NIeB3QP

彩色图像（高分辨率） https://imgur.com/7jvYwtX

//filter
var X = [
  [-1,0,1],
  [-2,0,2],
  [-1,0,1]
];

var Y = [
  [-1,-2,-1],
  [0,0,0],
  [1,2,1]
];  

 for (y = 0; y < height; y++) {
  for (x = 0; x < width; x++) {
        blueX  = 0 , blueY = 0;
        redX= 0,  redY= 0;
        greenX= 0, greenY= 0;
      for (offsety = 0; offsety <= 2; offsety++) {
            for (offsetx = 0; offsetx <= 2; offsetx++) {
                redY   += Y[offsetx][offsety] * pixelAt(x + offsetx, y + offsety, 0);
                redX   += X[offsetx][offsety] * pixelAt(x + offsetx, y + offsety, 0);
                greenY += Y[offsetx][offsety] * pixelAt(x + offsetx, y + offsety, 1);
                greenX += X[offsetx][offsety] * pixelAt(x + offsetx, y + offsety, 1);
                blueY  += Y[offsetx][offsety] * pixelAt(x + offsetx, y + offsety, 2);
                blueX  += X[offsetx][offsety] * pixelAt(x + offsetx, y + offsety, 2);
            }
        }
     redTotal = Math.sqrt((redX * redX) + (redY * redY ));
     blueTotal = Math.sqrt((blueX * blueX) + (blueY * blueY));
     greenTotal = Math.sqrt((greenX * greenX) + (greenY * greenY));
     data.push(redTotal,greenTotal, blueTotal, 255);
  }
}