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

Question

我用NodeJS开发了一款游戏，在这款游戏中，你必须猜测图像的名称，同时图像也会消失。

问题是服务器使用画布对图像进行像素化，但渲染并不完全适合框架，如您所见：

​

​

pixelate函数：

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

  ctx.drawImage(image, 0, 0, w, h);

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

  ctx.drawImage(canvas, 0, 0, w, h, 0, 0, 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, ctx, canvas, 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, 0);
      io.emit('image', canvas.toDataURL());
    })
  }
};

我尝试对"w“和"h”进行四舍五入，图像将完全填充在边框中，但发送的一些图像将是相同的，因此用户会感到滞后。

Answer 1

终于找到了一些东西，我调整了所有图片的正方形宽高比，然后对于"pixel_state“，如果它是100/(2^x)，我将几乎不再有任何重影像素。