Resize image in html5 canvas

Question

I'm taking image input from user, then resizing and showing it on a canvas. Here is the code-

HTML-

<form class="cmxform">
      <input type='file' id="Photo" />
      <canvas id="canvas" width="300" height="200"></canvas>
</form>

JavaScript-

$("#Photo").change(function (e) {
    var ctx = document.getElementById('canvas').getContext('2d');
    var img = new Image();
    img.src = URL.createObjectURL(e.target.files[0]);
    img.onload = function () {
       ctx.drawImage(img, 0, 0, img.width, img.height,     // source rectangle
             0, 0, canvas.width, canvas.height); // destination rectangle
    }

});

But here I'm loosing the aspect ratio. Is there any way to do it?

UPDATE-

I've got the answer from this sa question -

do you want the image to act like CSS background-size `contain` or `cover` — haxxxton, Dec 14 '16 at 06:54

score 1 · Accepted Answer · answered Dec 14 '16 at 10:33

Here is a snippet to help you for that

var ctx = document.getElementById('canvas').getContext('2d');
 var img = new Image();
 var fill = true;
 if (fill)
 {
  $('#fill').attr("disabled", true);
 }
$("#Photo").change(function (e) {
    img.src = URL.createObjectURL(e.target.files[0]);
    img.onload = function () {
    if (fill)
      {
    drowImageFill(img);
      }
      else
      {
         drowImageCenter(img);
      }
    }
});

$("#fill").click(function(){
  //console.log("fill");
  var input = document.getElementById('Photo');
  if (input.files[0] !== undefined)
  {
    img.src = URL.createObjectURL(input.files[0]);
    img.onload = function () {
      drowImageFill(img);
    }
  }
  $('#fill').attr("disabled", true);
  $('#center').attr("disabled", false);
  fill = true;
});
$("#center").click(function(){
  //console.log("center");
   var input = document.getElementById('Photo');
  if (input.files[0] !== undefined)
  {
    img.src = URL.createObjectURL(input.files[0]);
    img.onload = function () {
      drowImageCenter(img);
    }
  }
  $('#center').attr("disabled", true);
  $('#fill').attr("disabled", false);
  fill = false;
});
//ratio formula
//http://andrew.hedges.name/experiments/aspect_ratio/
function drowImageFill(img){
    ctx.clearRect(0, 0, canvas.width, canvas.height);
  //detect closet value to canvas edges
    if( img.height / img.width * canvas.width > canvas.height)
    {
      // fill based on less image section loss if width matched
      var width = canvas.width;
      var height = img.height / img.width * width;
      offset = (height - canvas.height) / 2;
      ctx.drawImage(img, 0, -offset, width, height);
    }
    else
    {
      // fill based on less image section loss if height matched
      var height = canvas.height;
      var width = img.width / img.height * height;
      offset = (width - canvas.width) / 2;
      ctx.drawImage(img, -offset , 0, width, height);
    }
    
}

function drowImageCenter(img)
{
   ctx.clearRect(0, 0, canvas.width, canvas.height);
  if( img.height / img.width * canvas.width < canvas.height)
    {
      // center based on width
      var width = canvas.width;
      var height = img.height / img.width * width;
      offset = (canvas.height - height) / 2;
      ctx.drawImage(img, 0, offset, width, height);
    }
    else
    {
      // center based on height
      var height = canvas.height;
      var width = img.width / img.height * height;
      offset = (canvas.width - width) / 2;
      ctx.drawImage(img, offset , 0, width, height);
    }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<canvas id="canvas" width="300" height="200" style="border:2px solid #000000;"></canvas>
<form class="cmxform">
      <input type='file' id="Photo" />
</form>

<button id="fill">Fill</button>
<button id="center">Center</button>

Resize image in html5 canvas

1 Answers1