2

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?

M.Babcock
  • 18,753
  • 6
  • 54
  • 84
tris
  • 863
  • 4
  • 9
  • 22
  • So the final image would look pixelated? – methodofaction Jan 01 '12 at 20:43
  • do you mean resampling and resize? – Joseph Jan 01 '12 at 20:52
  • see here: http://stackoverflow.com/questions/2369788/pure-javascript-image-handling-library-in-binary-form-not-through-dom it seems like there is client-side support in image manipulation already. – Joseph Jan 01 '12 at 20:53
  • yes, the final image needs to look pixelated – tris Jan 01 '12 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 Jan 01 '12 at 20:56

1 Answers1

3

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/";
pimvdb
  • 151,816
  • 78
  • 307
  • 352
  • 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 Jan 01 '12 at 20:57
  • @user1039407: If you want to go for compatibility, you'd be best off doing it server-side. If you set the resolution low it won't be that slow since relatively few pixels have to be painted on the canvas (setting the width through CSS doesn't seem to be a performance hit). – pimvdb Jan 01 '12 at 20:59
  • But since the method needs to be called several times calculating the image severside will take way too long. Using the canvas and disable the feature on old browsers would be the best solution though. But isn't there maybe any other possibility? For example display the image element with the size of 50² and somehow resize it's content without being "redrawn"? – tris Jan 01 '12 at 21:14
  • @user1039407: I'm not sure - resizing means redrawing anyhow. In fact, going the canvas way doesn't require any manual resizing code - just alter the relevant CSS properties. – pimvdb Jan 01 '12 at 21:21
  • How do you mean that? "alter the relevant CSS properties"? – tris Jan 01 '12 at 21:30
  • @user1039407: Changing `width`/`height` to resize the image. You don't need to do manual resizing through JavaScript for that part. – pimvdb Jan 01 '12 at 21:32
  • Ah, ok... but redrawing it with javascript is, of course, necessary. Since I thing it's the only client-side solution I'll mark it as answer - thank you :) – tris Jan 01 '12 at 21:39