旋转后如何裁剪图像？

Question

我有风景图像，我需要旋转以将其肖像打印为A4。 但是旋转后，我在A4预览空白处显示了一半内容。旋转后如何将横向调整为纵向？

示例：https://jsfiddle.net/Lnckq5om/1/

$(document).ready(function() {
  var degrees = 0;
  $('.img').click(function rotateMe(e) {
    degrees += 90;
    //$('.img').addClass('rotated'); // for one time rotation
    $('.img').css({
      'transform': 'rotate(' + degrees + 'deg)',
      '-ms-transform': 'rotate(' + degrees + 'deg)',
      '-moz-transform': 'rotate(' + degrees + 'deg)',
      '-webkit-transform': 'rotate(' + degrees + 'deg)',
      '-o-transform': 'rotate(' + degrees + 'deg)'
    });
  })
});

.rotated {
  transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  -o-transform: rotate(90deg);
}

.img {
  transition: all 0.5s ease;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<img class="img" src="http://projectpuffin.audubon.org/sites/g/files/amh646/f/styles/hero_mobile/public/atpu-scholtz.jpg" />

Answer 1

您可以尝试将其放入容器中

<div style="overflow:hidden">
    <img class="img" src="iamge.jpg" />
</div>

或使用画布裁剪图像

function crop(filepath){
   const img = new Image();
   img.src = filepath
   img.onload = () => {

     const Canvas  = document.createElement('canvas')
     let CanvasContext = Canvas.getContext('2d')

     Canvas.width = 250;      //<--- limit in width 
     Canvas.height = 250;     //<-- limit in height

     CanvasContext.drawImage(img,0,0,250,250,0,0,250,250)
     Canvas.remove()

     return Canvas.toDataURL('image/jpeg', 1)
   }
 }