2

I have developed a game in NodeJS where you have to guess an image's name meanwhile the image depixelates.

The problem is that the server uses canvas to pixelate the image but the render don't fit entirely in the frame as you can see :

enter image description here

The pixelate function :

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)
}

And the loop were i pixelate the image :

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());
    })
  }
};

I tried to round the "w" and "h", the image will fill entirely in frame but some of the images sent will be the same so it'll feel laggy for the user.

Arthur
  • 21
  • 3
  • Thanks ! Yes sorry i though i added it my bad. – Arthur Nov 03 '20 at 18:52
  • I know that not rounded values will produce weirds pixels but i don't know how to bypass this. – Arthur Nov 03 '20 at 18:54
  • did you try Math.ceil (or floor) instead of simply round ? – George Nov 03 '20 at 19:07
  • Thanks for the update, good first question. What image dimensions are you dealing with? Are they always the same or divisible by something reasonable like 10? If your image is something gnarly like 576x821 I think you'd need to be tricky and probably crop or pad the image slightly to make it cleanly divisible. – ggorlen Nov 03 '20 at 19:15
  • @George yes i did and it's the same problem as with round. – Arthur Nov 03 '20 at 19:19
  • @ggorlen i did it in this way so the image depixelate slowly but the user sees a lot of changes so there are not pauses of like 500 ms. – Arthur Nov 03 '20 at 19:22
  • Try to round by the pixel_state aka the size of the pixels, this would mean `Math.ceil(x / pixel_state)*pixel_state` – George Nov 03 '20 at 19:23

1 Answers1

0

Finally found something, I resized all of my pictures to square aspect ratio and then for the "pixel_state" if it's like 100/(2^x) i won't have any ghost pixels almost anymore.

Arthur
  • 21
  • 3