調整HTML5畫布中的圖像大小

Question

我正在從用戶處獲取圖像輸入，然后調整大小並將其顯示在畫布上。 這是代碼-

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
    }

}）;

但是在這里，我失去了寬高比。 有什么辦法嗎？

更新-

我從這個問題中得到了答案-

Answer 1

這是一個片段，可以幫助您

 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>