Utilisation de jcrop sur les images sensibles

Depuis jcrop travaille actuellement sur les écrans tactiles je veux faire une application web qui l'utilise. J'ai tout qui fonctionne sur elle, mais si j'essaie de faire le responsive design afin que l'utilisateur peut voir l'ensemble de l'image avant le recadrage (c'est la largeur est un pourcentage de l'écran), puis la zone recadrée ne sera pas la même que celle sélectionnée par l'utilisateur. Les coordonnées de la sélection faite sur le dessus de l'image ne correspond pas à ceux de l'image en pleine taille.

Jcrop comprend une solution à un problème similaire (lors de la manipulation des images énormes) à l'aide de la boîte de dimensionnement ou de la truesize méthode, mais aucun d'eux ne fonctionne que si la largeur de l'image est basée sur les pourcentages, au lieu d'une largeur en pixels.

La seule solution que je vois est de redimensionner l'image à l'aide de requêtes de média et d'en faire 3 ou 4 versions, en fonction de la largeur de l'écran, mais je préfère rester à l'pourcentage en fonction de redimensionnement parce que c'est beaucoup mieux.

C'est mon jcrop appel:

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

    };

source d'informationauteur Elaine Marley | 2012-11-30

TrueSize fini par faire le tour, je n'étais pas à l'utiliser correctement:

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

    };


});

0

Vous pouvez utiliser le truesize de paramètres pour cela.
0

Si vous chargez votre image avec l'ajax, vous pouvez obtenir l'image en largeur/hauteur avec getimagesize('img.png') et puis vous pouvez utiliser cette variable dans votre code javascript.

trueSize vraiment fonctionné pour moi.

J'espère que ma réponse serait d'aider les gens à avoir l'idée. Disons que nous sommes d'avoir une image réactive dans le bootstrap avec classe img-responsive

Voici le formulaire html avec image

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

Ici est la JCrop code qui vous permettra d'être rxryrw et rh sur la base des calculs de xyw et 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);

};

Enfin à PHP côté prendre rxryrw et rh au lieu de xyw et h.

(ou)

Vous pouvez simplement remplacer le

rxryrw et rh
sur
xyw et h comme cela et utiliser xyw et h comme d'habitude.

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

Vous devez vous connecter pour publier un commentaire.