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

Question

J'essaie de reproduire cette jcrop démo . Tout fonctionne bien sauf, mes images originales sont très grandes donc, selon le manuel, je les redimensionnant 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 plus ce qui est dans la section recadrée sur la CropBox. Voici un exemple:

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

une idée pour obtenir l'image de prévisualisation pour afficher correctement lorsque vous redimensionnez l'image principale dès le départ ??

Answer 1

ce 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 doit être la largeur de l'image réelle. Pour (re * 600), 600 doit être la largeur de l'image réelle. Je l'ai testé contre une image 800x600 et il fonctionne (en utilisant Tutorial3.html et de la modifier). En outre, ne pas utiliser la largeur et la hauteur de l'image à l'échelle, il ne fonctionnera pas.