Использование jcrop для реагирующих изображений

Поскольку jcrop теперь работает на сенсорных экранах, я хочу использовать веб-приложение, которое его использует. У меня есть все, что работает над этим, но если я попытаюсь сделать отзывчивый дизайн так, чтобы пользователь мог видеть все изображение перед обрезкой (ширина в процентах от экрана), то обрезанная область будет не такой, как выбранная Пользователь. Координаты выбора, сделанные поверх изображения с измененным размером, не будут соответствовать координатам на полном размере.

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

    };

Ответы

Ответ 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);

    };


});

Ответ 2

Для этого вы можете использовать параметр truesize.

Ответ 3

Если вы загрузите изображение с помощью ajax, вы можете получить ширину/высоту изображения с помощью getimagesize('img.png'), а затем вы можете использовать эту переменную в своем javascript-коде.

trueSize действительно работал у меня.

Ответ 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]
});

Ответ 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, y, w и h

$(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, y, w и h.

(или)

Вы можете просто переопределить rx, ry, rw и rh на x, y, w и h, и используйте x, y, w и h, как обычно.

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