Größe Bild in html5 Canvas

Question

Ich nehme Bildeingabe vom Benutzer, dann Größenanpassung und zeigt es auf einer Leinwand. Hier ist die 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 
    } 

});

Aber hier verliere ich das Seitenverhältnis. Gibt es einen Weg, es zu tun?

UPDATE-

ich die Antwort von this sa question haben -

Answer 1

Hier ist ein Ausschnitt Ihnen helfen, für die

var ctx = document.getElementById('canvas').getContext('2d'); 
 
var img = new Image(); 
 
var fill = true; 
 
if (fill) 
 
{ 
 
    \t $('#fill').attr("disabled", true); 
 
} 
 
$("#Photo").change(function (e) { 
 
    img.src = URL.createObjectURL(e.target.files[0]); 
 
    img.onload = function() { 
 
    if (fill) 
 
     { 
 
\t \t \t \t 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() { 
 
    \t \t 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() { 
 
    \t \t 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); 
 
\t \t //detect closet value to canvas edges 
 
    if(img.height/img.width * canvas.width > canvas.height) 
 
    { 
 
    \t // 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); 
 
\t \t 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>