Question

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 1920×1080 image with a resolution of 20×10 at a size of 200×100. Just using a img element, set it’s source and width/height to 20×10 surely works, but now I’d like to display the scaled image at a size of 200×100.

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

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.net/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.com/300/300/";