使用jQuery修剪上傳預覽

Question

我當前在用戶添加圖像時有一個圖像預覽。

的JS是這樣的：

 function logoImg(input) { 
     if (input.files && input.files[0]) { 
      var reader = new FileReader(); 

      reader.onload = function (e) { 
      $('#logo_img_prev') 
      .attr('src', e.target.result) 
      .width(210) 
      .height(165); 
     }; 

     reader.readAsDataURL(input.files[0]); 
     } 
     } 

這個偉大的工程，用於顯示圖像。但我希望圖像能夠裁剪到這些尺寸，而不是調整照片大小。我可以用什麼jQuery來實現這個目標？

Answer 1

CSS是你的答案。

您需要將圖像設置爲背景並使用background-size: cover。這可以將照片縮小到可能的最小尺寸並保持比例。

使用像<div>元素：

<div id="logo_img_prev"> 
</div> 

您JS應該是：

reader.onload = function (e) { 
    $('#logo_img_prev') 
     .css({ 
      'background-image': 'url(' + e.target.result + ')', 
      'background-size': 'contain', 
      'width': '210px', 
      'height': '165px' 
     }); 
    };