Точные размеры в jQuery Обрезка изображения

Question

Мне нужны размеры 380x156 после обрезки изображения. Я использую этот код js.

<script type="text/javascript"> 
     $(window).load(function() { 
      var options = 
      { 
       thumbBox: '.thumbBox', 
       spinner: '.spinner', 
       imgSrc: 'avatar.png' 
      } 
      var cropper = $('.imageBox').cropbox(options); 
      $('#file').on('change', function(){ 
       var reader = new FileReader(); 
       reader.onload = function(e) { 
        options.imgSrc = e.target.result; 
        cropper = $('.imageBox').cropbox(options); 
       } 
       reader.readAsDataURL(this.files[0]); 
       this.files = []; 
      }) 
      $('#btnCrop').on('click', function(){ 
       var img = cropper.getDataURL(); 
       $(".cropped").html(""); 
       $("#getImage").html(""); 
       $('.cropped').append('<img src="'+img+'">'); 
       $('#getImage').append('<img src="'+img+'">'); 
       $('#getImage').append('<input type="hidden" name="facilitylogo" value="'+img+'">'); 
      }) 
      $('#btnZoomIn').on('click', function(){ 
       cropper.zoomIn(); 
      }) 
      $('#btnZoomOut').on('click', function(){ 
       cropper.zoomOut(); 
      }) 
      $('.closeSa').on('click', function(){ 
       $('#myModal').modal('hide'); 
      }) 
     }); 
    </script> 

Он кадрирование по умолчанию кадрирования с размерами 198x198, но я хочу, чтобы обрезать изображение с размерами 380x156. Предложите мне простой способ обрезать изображение в соответствии с моими требованиями.

Answer 1

Обрезка в зависимости от размера квадрата селектора. Измените код css и измените параметр width и height.

.imageBox .thumbBox 
{ 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    width: 380px; 
    height: 156px; 
    margin-top: -100px; 
    margin-left: -100px; 
    border: 1px solid rgb(102, 102, 102); 
    box-shadow: 0 0 0 1000px rgba(0, 0, 0, 0.5); 
    background: none repeat scroll 0% 0% transparent; 
}