为什么Jcrop-tracker没有显示它的正确位置？

Question

在我的应用中，用户可以拍摄照片或从设备上传图片。此图像是Jcrop函数的源。此功能正常工作，正如“作物”正确。然而，预览你正在裁剪的jcrop-tracker并没有显示它在图像上的正确位置。

请看这个例子：

将跟踪器移动到图像顶部时，它几乎会显示整个图像。当向下移动时，它根本不会显示任何东西。这怎么可能？

我的猜测是因为jCrop存在缩小图片的问题（例如从设备相机拍摄的照片）。

我使用CSS缩小图像尺寸，使其适合设备屏幕：

#imgContainer {
    max-width: 100%;
    max-height: 100%;
}
#imgContainer img {
    max-width: 100%;
    max-height: 100%;
}

有没有办法阻止这种情况？

这是我的代码：

$(window).load(function() {

var jcrop_api, boundx, boundy;

function updatePreview(c) { // croping image preview
    if (parseInt(c.w) > 0) {
        var rx = 220 / c.w, ry = 220 / c.h;
    }
}
function showCoords(c) { // show all coords
    $('#x').val(c.x);
    $('#y').val(c.y);
    $('#x2').val(c.x2);
    $('#y2').val(c.y2);
    $('#w').val(c.w);
    $('#h').val(c.h);
}

$('#cropImage').Jcrop({
    onChange: updatePreview,
    onSelect: showCoords,
    bgFade: true,
    bgOpacity: .8,
    aspectRatio: 1,
    maxSize: [ 150, 150 ],
    boxWidth: 284,
    boxHeight: 382
},function(){
    jcrop_api = this;
});
var canvas = document.getElementById("canvasresult");
$("#m1-cropScreen-cropIt").on("click", function(){

    var context = canvas.getContext("2d");
    var img = document.getElementById("cropImage"),
        $img = $(img),
        imgW = img.naturalWidth,
        imgH = img.naturalHeight;

    console.log($img.width());
    console.log($img.height());

    var ratioY = imgH / $img.height(),
        ratioX = imgW / $img.width();

    var getX = $('#x').val() * ratioX,
        getY = $('#y').val() * ratioY,
        getWidth = $('#w').val() * ratioX,
        getHeight = $('#h').val() * ratioY;

    context.drawImage(img,getX,getY,getWidth,getHeight,0,0,150,150);

    $('#cropResult').attr('src', canvas.toDataURL());

});

});

Answer 1

绅士，我很抱歉延迟回复你。谢谢大家回答我的问题。

我有一个非常忙碌的一周，所以我没有多少时间来完成这个项目。今天我又把它拿了起来，我第一次尝试自己解决这个问题。

幸运的是，这次它奏效了。我最终使用了Jcrop的box sizing method。我相信我之前尝试过，但这次它完美无瑕。所以问题解决了:)）

Answer 2

不幸的是，这对我没有用，但我有一个不同的问题，我希望能帮助其他有这个问题的人。

我的原因是css样式冲突。

 From a 3rd party style sheet
 img { max-width: 100% }

  My Style Sheet -- adding this fixed it
 .jcrop-holder img, img.jcrop-preview { max-width: none !important }