CODEWITHSUNDEEP
javascriptcssimagecross-browserscale
julx
julx

Reputation: 9091

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.

Upvotes: 2

Views: 792

Answers (3)

c-smile
c-smile

Reputation: 27460

Any details of rendering methods e.g. anti-aliasing/smoothing are out of CSS 2.1 scope. So the answer is 'no' for CSS 2.1. Image object in JS does not have scaling features either. So 'no' again.

Upvotes: 2

Simon Sarris
Simon Sarris

Reputation: 63812

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.

Upvotes: 4

Simon
Simon

Reputation: 285

I know flash is a dying technology, however this is some pretty excellent image manipulation scrips should you wish to check that out. This seems a little complex for standard web based image processing although Sounds like a wicked idea!

Upvotes: 1

Related Questions