旋转后如何裁剪图像？

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