jcrop démo ne fonctionne plus après le redimensionnement de l'image principale (mis à jour avec l'image)

Question

J'essaie de replicate this jcrop demo. Tout fonctionne bien sauf, mes images originales sont très grandes si, as per the manual, i am resizing them sur ma page comme ceci:

jQuery('#cropbox').Jcrop({ 
      onChange: showPreview, 
      onSelect: showPreview, 
      bgColor: 'white', 
      aspectRatio: 1, 
      boxWidth: 300, 
      boxHeight: 500 
     }); 

la question est maintenant la deuxième fenêtre d'aperçu (id = « preview ») ne montre ce qui est dans le recadrée section sur la cropbox. Voici un exemple:

clairement, la fenêtre de prévisualisation ne correspond pas à la zone que je suis Recadrage dans la première image.

toute idée comment obtenir l'image d'aperçu pour montrer correctement lorsque vous redimensionnez l'image principale à l'avance ??

Answer 1

essayer this JSFiddle

html:

<img id="cropbox" src="http://homepage.mac.com/davydewit/popacademie/rw_common/themes/blendit/images/header/image1.jpg" /> 

<br /> 

<br /> 
<div id="previewcrop"> 
<img id="preview" src="http://homepage.mac.com/davydewit/popacademie/rw_common/themes/blendit/images/header/image1.jpg" /> 
</div> 

css:

#previewcrop{ 
    width: 100px; 
    height: 100px; 
    overflow: hidden; 
    margin-left: 5px; 
} 

js:

var imgwidth = 849; // width of the image 
var imgheight = 423; // height of the image 

jQuery('#cropbox').Jcrop({ 
      onChange: showPreview, 
      onSelect: showPreview, 
      bgColor: 'white', 
      aspectRatio: 1, 
      boxWidth: imgwidth/3, 
      boxHeight: imgheight/3 
     }); 

function showPreview(coords) 
{ 
    var rx = 100/coords.w; 
    var ry = 100/coords.h; 

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

Answer 2

function showPreview(coords) 
{ 
    if (parseInt(coords.w) > 0) 
    { 
     var rx = 100/coords.w; 
     var ry = 100/coords.h; 

     jQuery('#preview').css({ 
      width: Math.round(rx * 800) + 'px', 
      height: Math.round(ry * 600) + 'px', 
      marginLeft: '-' + Math.round(rx * coords.x) + 'px', 
      marginTop: '-' + Math.round(ry * coords.y) + 'px' 
     }); 
    } 
} 

Pour (rx * 800), 800 devrait être la largeur de votre image réelle. Pour (ry * 600), 600 devrait être la largeur de votre image réelle. J'ai testé cela sur une image 800x600 et cela fonctionne (en utilisant Tutorial3.html et en le modifiant). En outre, n'utilisez pas la largeur et la hauteur de l'image mise à l'échelle, cela ne fonctionnera pas.