旋转后如何裁剪图像？答案

【问题标题】：How to crop image after rotate?旋转后如何裁剪图像？
【发布时间】：2018-10-01 09:26:58
【问题描述】：

我有横向图像，我需要通过旋转来将其纵向打印为 A4。但旋转后，我在 A4 预览空白处和一半的内容显示。旋转后如何将横向调整为纵向？

$(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" />

【问题讨论】：

您是否尝试使用宽度 css 属性修复它？

标签： javascript jquery css printing image-rotation

【解决方案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)
   }
 }

【讨论】：