javascript - 旋转后如何裁剪图像？

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>

或者使用 Canvas 裁剪图片

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)
   }
 }