lucumr

First of all, the Quality of the thumbnail is quite bad, at least by now (just tested in firefox). Furthermore it’s a bad idea to do thumbnailing on the clientside but it works.

function makeThumb(src, canvas, width, height) {
  canvas.width = width;
  canvas.height = height;
  var ctx = canvas.getContext('2d');
  ctx.scale(
    width / src.width,
    height / src.height
  );
  ctx.drawImage(src, 0, 0);
}

src must be an Image, canvas a canvas element and width/height is the size of the resulting thumbnail. If you want to get the image data of the thumbnail for saving on the server or whatever, you can do canvas.toDataURL() which returns the data of the image as base64 version of a png.

This entry was posted on Sunday, June 17th, 2007 at 10:54 am and tagged as snippets, javascript. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.