Javascript 为什么Jcrop跟踪器不显示它'；位置正确吗？

在我的应用程序中，用户可以从设备上拍照或上传图像。此图像是Jcrop函数的源代码。此功能正常工作，因为它可以正确地“裁剪”。但是，预览裁剪内容的jcrop跟踪器不会在图像上显示其正确位置

请参见此示例：

将跟踪器移动到图像顶部时，它将显示几乎整个图像。再向下移动时，它不会显示任何内容。这怎么可能

我猜这是因为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());

});

});

---

先生，很抱歉耽误了你的回复。谢谢所有回答我问题的人

我这一周很忙，所以几乎没有时间做这个项目。今天我又拿起了它，我第一次尝试再次自己解决这个问题

---

幸运的是，这次成功了。我最终使用了Jcrop的。我相信我以前试过，但这次它工作得很完美。所以问题解决了：）

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

我的是由于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 }

---

你能发布一些我们可以直接测试的东西吗？（我缺少一些html源代码，所以一把小提琴或其他东西会很方便）我猜你的问题源于没有使用“正确”的图像尺寸，没有将它们“转换”到实际的屏幕/显示尺寸！此外，使用

max height:100%

可能会导致图像的纵横比发生变化（当图像的高度高于100%宽度时的视口高度）。我认为你必须根据视窗宽度转换图片的宽度和高度，进行裁剪并将裁剪转换回原始图像的大小。嗯，你可能有一个观点。知道如何将图像转换为视口宽度的大小吗？也可以将您的HTML包含在问题中吗？我正在计算这里引用的12个DOM元素，其中没有提供DOM。如果没有HTML，则无法调试此代码，因为它很可能与页面布局有关。