is there any possibility to change an image's resolution on clientside (using CSS, Javascript, whatever) but keep it's size on the screen?

Example: I want to dispaly a 1920x1080 image with a resolution of 20x10 at a size of 200x100. Just using a img element, set it's source and width/height to 20x10 surely works, but now I'd like to display the scaled image at a size of 200x100.

Is that somehow possible without generating a new image on server-side?

is there any possibility to change an image's resolution on clientside (using CSS, Javascript, whatever) but keep it's size on the screen?

Example: I want to dispaly a 1920x1080 image with a resolution of 20x10 at a size of 200x100. Just using a img element, set it's source and width/height to 20x10 surely works, but now I'd like to display the scaled image at a size of 200x100.

Is that somehow possible without generating a new image on server-side?

• javascript
• html
• css

• So the final image would look pixelated? – methodofaction Commented Jan 1, 2012 at 20:43
• do you mean resampling and resize? – Joseph Commented Jan 1, 2012 at 20:52
• see here: stackoverflow./questions/2369788/… it seems like there is client-side support in image manipulation already. – Joseph Commented Jan 1, 2012 at 20:53
• yes, the final image needs to look pixelated – tris Commented Jan 1, 2012 at 20:54
• Drawing the image inside a canvas and use it's data as new imagesource is a solution i already thought of. But first I guess it's so slow and of course using a canvas the browser need to support HTML5 – tris Commented Jan 1, 2012 at 20:56

1 Answer 1

You can do this using HTML5 canvas:

Given an original image of any size that you want to give a size of 200 x 200 and a resolution of 50 x 50:

1. Make a canvas of 50 x 50
2. Draw the image with arguments defining a width and height of 50
3. Enlarge the canvas through CSS to stretch it to 200 x 200.

Like this: http://jsfiddle/eGjak/234/.

As a side note, HTML5 canvas uses anti-aliasing in all browsers as far as I'm concerned, with no ability to turn that off. So instead of pixelated results you'll have blurry results.

// paint 200x200 image with resolution 50x50
var w = 200,
    h = 200,
    p = 50,
    q = 50;

var img = $("img").get(0);

img.onload = function() {
    cv.width = p;  // set canvas resolution
    cv.height = q;

    ctx.drawImage(img, 0, 0, p, q); // draw image with given resolution

    cv.style.width = w + "px";  // enlarge canvas by stretching
    cv.style.height = h + "px";
};

img.src = "http://www.lorempixum./300/300/";