Как обрезать изображение после поворота?

Question

У меня есть пейзажное изображение, мне нужно портретировать его, поворачивая для печати в формате A4.Но после поворота у меня в предварительном просмотре А4 пустое пространство и половина содержимого отображается.Как настроить альбомную ориентацию после поворота?

Пример: 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)
   }
 }