在響應式圖像上使用jcrop

Question

由於jcrop現在正在處理觸摸屏，我想做一個使用它的web應用程序。我有一切工作，但如果我嘗試使設計響應，以便用戶可以在裁剪前看到整個圖像（它的寬度是屏幕的百分比），那麼裁剪的區域將不會與所選的用戶。在調整大小的圖像上進行選擇的座標將不匹配全尺寸圖像上的座標。

Jcrop通過使用框尺寸或truesize方法包含類似問題（處理巨大圖像時）的解決方案，但如果圖像的寬度基於百分比而不是像素的給定寬度，則它們都不起作用。

我能想到的唯一解決方案是使用媒體查詢調整圖像大小，並根據屏幕寬度製作3或4個版本，但我寧願堅持基於百分比的調整大小，因爲它看起來好多了。

這是我的電話jcrop：

 var jcrop_api, boundx, boundy; 
    $('#target').Jcrop({ 
     onChange: updatePreview, 
     onSelect: updatePreview, 
     aspectRatio: 0.75 
    },function(){ 
     // Use the API to get the real image size 
     var bounds = this.getBounds(); 
     boundx = bounds[0]; 
     boundy = bounds[1]; 
     trueSize: [900,600], 
     // Store the API in the jcrop_api variable 
     jcrop_api = this; 
    }); 
      function updatePreview(c){ 
     if (parseInt(c.w) > 0){ 
      var rx = <?echo $width;?>/c.w; 
      var ry = <?echo $height;?>/c.h; 

      $('#preview').css({ 
       width: Math.round(rx * boundx) + 'px', 
       height: Math.round(ry * boundy) + 'px', 
       marginLeft: '-' + Math.round(rx * c.x) + 'px', 
       marginTop: '-' + Math.round(ry * c.y) + 'px' 
      }); 
     } 

     $('#x').val(c.x); 
     $('#y').val(c.y); 
     $('#w').val(c.w); 
     $('#h').val(c.h); 

    }; 

Answer 1

TrueSize落得這樣做的伎倆，我沒有使用得當：

jQuery(function($){ 

    // Create variables (in this scope) to hold the API and image size 
    var jcrop_api, boundx, boundy; 

    $('#target').Jcrop({ 
     onChange: updatePreview, 
     onSelect: updatePreview, 
     aspectRatio: 0.75, 
     trueSize: [<?echo $width2;?>,<?echo $height2;?>] 
    },function(){ 
     // Use the API to get the real image size 
     var bounds = this.getBounds(); 
     boundx = bounds[0]; 
     boundy = bounds[0.75]; 
     //trueSize: [ancho,alto], 
     // Store the API in the jcrop_api variable 
     jcrop_api = this; 
    }); 

    function updatePreview(c){ 
     if (parseInt(c.w) > 0){ 
      var rx = <?echo $width;?>/c.w; 
      var ry = <?echo $height;?>/c.h; 

      $('#preview').css({ 
       width: Math.round(rx * boundx) + 'px', 
       height: Math.round(ry * boundy) + 'px', 
       marginLeft: '-' + Math.round(rx * c.x) + 'px', 
       marginTop: '-' + Math.round(ry * c.y) + 'px' 
      }); 
     } 

     $('#x').val(c.x); 
     $('#y').val(c.y); 
     $('#w').val(c.w); 
     $('#h').val(c.h); 

    }; 


}); 

Answer 2

可以使用truesize參數此。

Answer 3

如果您加載使用AJAX你的形象，你可以得到getimagesize('img.png')圖像寬度/高度，然後你可以使用這個您的JavaScript代碼中的變量。

trueSize真的爲我工作。

Answer 4

它的工作用下面的代碼

var width2 = jQuery('#cropbox').prop('naturalWidth'); 
 
var height2 = jQuery('#cropbox').prop('naturalHeight'); 
 

 
jQuery('#cropbox').Jcrop({ 
 
    aspectRatio: 1, 
 
    onSelect: updateCoords, 
 
    onChange: updateCoords, 
 
    setSelec: [0,0,110,110], 
 
    trueSize: [width2,height2] 
 
});

Answer 5

我甚至希望我的回答能幫助人們得到的想法。比方說，我們有在引導一個負責任的形象與類IMG響應

下面是HTML形式與圖像中它

<form method="POST" action="#" enctype="multipart/form-data"> 
     <img class="img-responsive" id="get-profile-img" src="image.jpg"/> 
     <input id="x" name="x" type="hidden" value="">   
     <input id="y" name="y" type="hidden" value="">   
     <input id="w" name="w" type="hidden" value="">   
     <input id="h" name="h" type="hidden" value="">   

     <input id="rx" name="rx" type="hidden" value="">   
     <input id="ry" name="ry" type="hidden" value="">   
     <input id="rw" name="rw" type="hidden" value="">   
     <input id="rh" name="rh" type="hidden" value="">   
</form> 

這裏是JCrop代碼將得到RX，RY，RW和RH基於ÿ，的X計算，瓦特和ħ

$(function() { 
    $('#get-profile-img').Jcrop({ 
      onSelect: updateCoords, 
      aspectRatio: 1, 
      setSelect : [50, 0, 300,300], 
      allowResize: true 
     }); 
    }); 
    function updateCoords(c) { 
     $('#x').val(c.x); 
     $('#y').val(c.y); 
     $('#w').val(c.w); 
     $('#h').val(c.h); 
     responsiveCoords(c, '#get-profile-img'); 
    }; 

    function responsiveCoords(c, imgSelector) { 

     var imgOrignalWidth  = $(imgSelector).prop('naturalWidth'); 
     var imgOriginalHeight = $(imgSelector).prop('naturalHeight'); 

     var imgResponsiveWidth = parseInt($(imgSelector).css('width')); 
     var imgResponsiveHeight = parseInt($(imgSelector).css('height'));     

     var responsiveX   = Math.ceil((c.x/imgResponsiveWidth) * imgOrignalWidth); 
     var responsiveY   = Math.ceil((c.y/imgResponsiveHeight) * imgOriginalHeight); 

     var responsiveW   = Math.ceil((c.w/imgResponsiveWidth) * imgOrignalWidth); 
     var responsiveH   = Math.ceil((c.h/imgResponsiveHeight) * imgOriginalHeight); 

     $('#rx').val(responsiveX); 
     $('#ry').val(responsiveY); 
     $('#rw').val(responsiveW); 
     $('#rh').val(responsiveH); 

}; 

最後，在PHP側採取RX，RY，RW和的RH代替X，ÿ，瓦特和ħ 。

（或）

可以簡單地覆蓋
RX，RY，RW和 上 XRH，ÿ，瓦特和ħ這樣並使用x ，和，w和h照常。

$('#x').val(responsiveX); 
$('#y').val(responsiveY); 
$('#w').val(responsiveW); 
$('#h').val(responsiveH);