如何解决画布NodeJS问题的像素错误？

如何解决如何解决画布NodeJS问题的像素错误？

我在NodeJS中开发了一个游戏，您必须在图像去像素的同时猜测图像的名称。

问题是服务器使用画布对图像进行像素化，但是渲染不能完全容纳在帧中：

像素化功能：

function pixelate(image,ctx,canvas,value) {
  var size = value / 100,w = canvas.width * size,h = canvas.height * size;

  ctx.drawImage(image,w,h);

  ctx.msImageSmoothingEnabled = false;
  ctx.mozImageSmoothingEnabled = false;
  ctx.webkitimageSmoothingEnabled = false;
  ctx.imageSmoothingEnabled = false;

  ctx.drawImage(canvas,h,canvas.width,canvas.height)
}

然后循环将图像像素化：

function image_pixel(bool = 1) {
  if (bool) {
    if (pixel_state > 24) {
      restartGame("",false);
    } else {
      loadImage('image.jpg').then((image) => {
        pixel_state += 0.1;
        var canvas = createCanvas(image.width,image.height);
        var ctx = canvas.getContext('2d');
        pixelate(image,pixel_state);
        io.emit('image',canvas.toDataURL());
      })
    }
  } else { // Image without pixelisation
    loadImage('image.jpg').then((image) => {
      var canvas = createCanvas(image.width,image.height);
      var ctx = canvas.getContext('2d');
      ctx.drawImage(image,0);
      io.emit('image',canvas.toDataURL());
    })
  }
};

我尝试将“ w”和“ h”四舍五入，图像将完全填入帧中，但发送的某些图像将相同，因此用户会感到不舒服。

解决方法

最后找到了一些东西，我将所有图片的大小调整为正方形纵横比，然后对于“ pixel_state”，如果它像100 /（2 ^ x），我几乎将不再有任何虚像像素。