调整HTML5画布中的图像大小

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 -

Answer 1

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>