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