Scaling down images with Javascript in HTML5

Question

I'm trying to create a tool for users uploading photos, but I want to scale down these photos before they are uploaded.

My initial try was to use the scale function from canvas 2d context, but it create a bad looking images.

I wish I could just use the CSS scale function, but I'm unable to find a way to do that.

This may help: http://stackoverflow.com/questions/17861447/html5-canvas-drawimage-how-to-apply-antialiasing/17862644#17862644 — , Jun 08 '15 at 22:11
This looks like the same question here: http://stackoverflow.com/questions/2434458/image-resizing-client-side-with-javascript-before-upload-to-the-server — River, Jun 08 '15 at 22:11
Here's a previous stackexchange answer: http://stackoverflow.com/questions/18922880/html5-canvas-resize-downscale-image-high-quality - I wouldn't say it's an exact duplicate since you're looking for ways to solve this with CSS as well, but it should help you out. — zfrisch, Jun 08 '15 at 22:11
This has some links to examples as well - http://techslides.com/javascript-image-resizer-and-scaling-algorithms — NG., Jun 08 '15 at 22:11

score 0 · Answer 1 · answered Jun 08 '15 at 22:12

Lets say you want the max width to be 800 and max height 600, here's a simple code with if statements. Hope this helps.

var MAX_WIDTH = 800;
var MAX_HEIGHT = 600;
var width = img.width;
var height = img.height;

if (width > height) {
  if (width > MAX_WIDTH) {
    height *= MAX_WIDTH / width;
    width = MAX_WIDTH;
  }
} else {
  if (height > MAX_HEIGHT) {
    width *= MAX_HEIGHT / height;
    height = MAX_HEIGHT;
  }
}

Scaling down images with Javascript in HTML5

1 Answers1