如果调整图像大小,Jcrop问题 - Jquery

时间:2014-10-30 00:06:38

标签: jquery css html5 jcrop

我正在使用Jquery UI来调整图像大小。因此,如果有任何图像,那么用户可以使用JQuery UI调整图像大小,然后我使用JCrop来裁剪图像。所以问题是当用户调整图像大小然后在调整图像大小后裁剪图像然后由于某种原因Jcrop选择原始大小的图像。有没有办法告诉JCrop选择调整大小的图像尺寸? 请参阅附图。

enter image description here

$('img').Jcrop({
    onChange: showPreview,
    onSelect: showPreview,
    setSelect: [100, 100, 50, 50]
});

function showPreview(c) {
    if (parseInt(c.w) > 0) {
        // Show image preview
        var imageObj = $('img')[0];
        var canvas = $("#preview")[0];
        var context = canvas.getContext("2d");
        context.drawImage(imageObj, c.x, c.y, c.w, c.h, 0, 0, canvas.width, canvas.height);
        cropWidth = c.w;
        cropHeight = c.h;
    }
}

请查看JsFiddle链接http://jsfiddle.net/mpvPC/106/。正如你注意到我在图像上有宽度和高度,如果你移除宽度和高度,它会调整大小,然后它可以正常工作

1 个答案:

答案 0 :(得分:3)

我找到了解决方案。我刚刚使用了trueSize。请检查下面的代码。

$('image').Jcrop({
    onChange: showPreview,
    onSelect: showPreview,
    setSelect: [100, 100, 50, 50],
    trueSize: [originalImageWidth, originalImageHeight] // use Original Image dimensions not resized one
});