2

このjcropデモを複製しようとしています。私の元の写真が非常に大きいことを除いて、すべてがうまく機能しているので、マニュアルに従って、私は次のように私のページでそれらのサイズを変更しています：

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

問題は、2番目のプレビューウィンドウ（id = "preview"）に、クロップボックスのクロップされたセクションの内容が表示されなくなったことです。次に例を示します。

代替テキスト

明らかに、プレビューウィンドウは、最初の画像でトリミングしている領域と一致しません。

メイン画像のサイズを事前に変更するときにプレビュー画像を正しく表示する方法はありますか？

4

2 に答える 2

4

この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'
    });
};
于 2010-11-09T09:54:34.040 に答える
0 
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'
        });
    }
}

(rx * 800) の場合、800 が実際の画像の幅になります。(ry * 600) の場合、600 が実際の画像の幅になります。これを 800x600 の画像に対してテストしたところ、動作しました (Tutorial3.html を使用して変更しました)。また、スケーリングされた画像の幅と高さを使用しないでください。機能しません。

于 2010-11-04T05:17:33.933 に答える