javascriptimagemicrosoft-edgeimage-rendering

Pixelated image rendering on Microsoft Edge?


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?


Solution

  • 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.