drawImage resize image to 500px high

Question

I am trying to take the image that is 1280x960 and resize it using drawImage so that is is 600 pixels high. I have worked out the ratio that I think I need to achieve this but don't know how to apply...

var canvas = document.getElementById('mycanvas');
var ctx = canvas.getContext('2d');
var img = new Image();
img.onload = function () {
  canvas.height = this.height;
  canvas.width = this.width;
  
  ratio = canvas.height / canvas.width;
  
  console.log(canvas.width + 'x' + canvas.height + ' | ratio = ' + ratio);
  
  ctx.drawImage(img, 0, 0, 300, 500);
}
img.src = 'https://c.slashgear.com/wp-content/uploads/2015/06/dxo-one-sample-3-1280x960.jpg';

How can I specify the resulting image size, making the width automatic? I eventually want this function to resize any image to 500 pixels high.

user_3313922 · Answer

I applied the ratio to your call to drawImage and it seems to work:

ctx.drawImage(img, 0, 0, 500 / ratio, 500);

var canvas = document.getElementById('mycanvas');
var ctx = canvas.getContext('2d');
var img = new Image();
img.onload = function () {
  canvas.height = this.height;
  canvas.width = this.width;
  
  ratio = canvas.height / canvas.width;
  
  console.log(canvas.width + 'x' + canvas.height + ' | ratio = ' + ratio);
  
  ctx.drawImage(img, 0, 0);
  canvas.style.width = 500 / ratio + "px";
  canvas.style.height = 500 + "px";
}
img.src = 'https://c.slashgear.com/wp-content/uploads/2015/06/dxo-one-sample-3-1280x960.jpg';

user_3313922 · Answer

Here is a solution, a bit roundabout but seems to work. I created a new image using toDataURL() from the original sized canvas. Although the new image is reduced, the total dimension is still that of the original image, such that the remaining space is transparent. Then I set and clip this image into a new canvas. The resulting canvas has the correctly sized image which can be copied and pasted with the desired dimension.

If the snippet below does not display the image in the new canvas, please try the following fiddle which seems to work well: https://jsfiddle.net/jfeferman/u80fhy0z/

var canvas = document.getElementById('mycanvas');
var ctx = canvas.getContext('2d');
var img = new Image();
img.crossOrigin = "Anonymous";
img.onload = function () {
  canvas.height = this.height;
  canvas.width = this.width;
  
  ratio = canvas.height / canvas.width;
  
  console.log(canvas.width + 'x' + canvas.height + ' | ratio = ' + ratio);
  
  ctx.drawImage(img, 0, 0, 500 / ratio, 500);
  
  var newImage = new Image();
  newImage.crossOrigin = "Anonymous";
  newImage.src = canvas.toDataURL();
  
  var newCanvas = document.getElementById("newcanvas");
  newCanvas.height = 500;
  newCanvas.width = 500 / ratio;
  var newCtx = newCanvas.getContext('2d');
  newCtx.drawImage(newImage, 0, 0, 500 / ratio, 500, 0, 0, 500 / ratio, 500);
}
img.src = 'https://c.slashgear.com/wp-content/uploads/2015/06/dxo-one-sample-3-1280x960.jpg';

#mycanvas {
  display: none;
}

drawImage resize image to 500px high

2 Answers