调整主图像大小后，jcrop 演示不再有效（使用图片更新）

Posted 2023-02-25

【中文标题】调整主图像大小后，jcrop 演示不再有效（使用图片更新）

【英文标题】：jcrop demo no longer works after resizing main image (Updated with Picture)

【发布时间】：2010-11-01 16:12:32

【问题描述】：

我正在尝试replicate this jcrop demo。一切正常，除了我的原始图片非常大，所以，as per the manual, i am resizing them 在我的页面上是这样的：

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

现在的问题是第二个预览窗口 ( id="preview" ) 不再显示裁剪框上裁剪部分的内容。这是一个例子：

显然，预览窗口与我在第一张图片中裁剪的区域不匹配。

知道如何在预先调整主图像大小时正确显示预览图像吗？？

【参考方案1】：

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

【参考方案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'
        );
    

对于 (rx * 800)，800 应该是真实图像的宽度。对于 (ry * 600)，600 应该是真实图像的宽度。我已经针对 800x600 图像对此进行了测试，并且可以正常工作（使用 Tutorial3.html 并对其进行修改）。另外，不要使用缩放后的图片的宽高，这样是不行的。