Search code examples
javascriptcssimagecross-browserscale

Pixelated cross-browser image scaling

I would like to scale an image up with scale = 2.0. I would like do to that without any smoothing, so the desired effect is to turn each pixel of the original image into 2x2 pixels of the same colour.

I wonder if this is possible to do in Javascript/CSS in a cross-browser (>= IE7) manner without resorting to <canvas /> tag.

Solution

  • Sorry, I don't believe the effect you want is possible cross-browser without a canvas.

    In Firefox in Canvas you can do ctx.mozImageSmoothingEnabled = false; but that's as close as you're going to get.

    image-rendering: -moz-crisp-edges; might help you in firefox for CSS scaling, and -ms-interpolation-mode* might help you in IE, but I doubt you'll get a solution that looks the same across all browsers.

    * I think this has been deprecated/obsoleted.