调整html5画布中的图像大小

时间:2016-12-14 06:14:50

标签: javascript html5-canvas image-resizing

我从用户那里获取图像输入,然后调整大小并在画布上显示。这是代码 -

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
    }

});

但在这里我失去了宽高比。有没有办法做到这一点?

  

更新 -

     
    

我从this sa question -

得到了答案   

1 个答案:

答案 0 :(得分: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>