2017-10-03 7 views
0

J'ai utilisé Jcrop v2.0.0 pour recadrer une image dans un popup.Zone de sélection Jcrop en hauteur

et ce qui suit est mon code Javascript pour le même.

var imageCropWidth = 0; 
var imageCropHeight = 0; 
var cropPointX = 0; 
var cropPointY = 0; 

$('#CropImage').attr('src', '/Users/3/images/Umbraco.jpg'); 
$(document).ready(function() { 
     initCrop(); 
    }); 

    function initCrop() { 
     $('#CropImage').Jcrop({ 
      onSelect: setCoordsAndImgSize, 
      boxWidth: 260, 
      //boxHeight: 260, 
     }); 
    } 

function setCoordsAndImgSize(e) { 
imageCropWidth = e.w; 
     imageCropHeight = e.h; 

     cropPointX = e.x; 
     cropPointY = e.y; 
} 

maintenant après avoir utilisé boxwidth je me bats pour obtenir précise les coordonnées x, y de la zone de culture sélectionnée je pense qu'il est dû à Jcrop ajouter la hauteur à l'image ou ainsi.

enter image description here

Ce que j'ai essayé jusqu'à maintenant:

-> Restructurer la hauteur de l'élément parent HTML/retiré (comme l'a suggéré mon nombreux post)

-> ont enlever boxHeight: et seule case donnée avec

-> ont essayer avec x2, manipulation y2

-> événement essayez avec jcrop truesize.

Répondre

0

Trouvé la solution, le problème était lors du chargement dynamique de l'image sur le, de sorte que jcrop prenait la taille de la dernière image.

Et même peut être géré par setImage

setImage (SelectedImage.attr ('src'));

Donc le code JS sera.

var jcrop_api; 

function initCrop() { 
     var ratioW = ($('#CropImage')[0].naturalWidth); 
     var ratioH = ($('#CropImage')[0].naturalHeight); 
     $('#CropImage').Jcrop({ 
      onSelect: setCoordsAndImgSize, 
      boxWidth: 260, 
      boxHeight: 260, 
      setSelect: [0, 0, ratioW, ratioH] 
     }, function() { 
      jcrop_api = this; 
     }); 
    } 

// appel sur le changement d'image

jcrop_api.setImage(SelectedImage.attr('src'));