1

Microsoft Edge doesn't support the 'image-rendering' CSS property, so I can't use 'image-rendering: pixelated', which is a real pain for the website I'm making.

So is there any way to use JavaScript to render images as pixelated in Edge?

Rob Kwasowski
  • 2,690
  • 3
  • 13
  • 32
  • This exact question hasn't been asked before, that's why I asked it. I was specifically asking about Edge. Now people wondering how to do pixelated image rendering on Edge will have an answer, so it's useful in that way. And so I don't think it deserved a downvote. – Rob Kwasowski Mar 25 '18 at 01:23
  • It's also worth noting that you (and anyone else that's hitting this issue) can vote for support of this feature within Microsoft Edge here: https://wpdev.uservoice.com/forums/257854-microsoft-edge-developer/suggestions/7902426-image-rendering-pixelated – gregwhitworth Mar 26 '18 at 18:12

1 Answers1

1

You can render the image to a canvas at a higher resolution and then replace the img.src with the data URL. You may need to render it "pixel by pixel" with essentially a nearest neighbor algorithm. With imageSmoothingEnabled turned off, this can be avoided.

Note that for external images you will not be allowed to export the canvas as data URL. You can just use the canvas itself, though.

H.B.
  • 166,899
  • 29
  • 327
  • 400