为什么 Jcrop-tracker 不显示它的正确位置？答案

【问题标题】：Why does the Jcrop-tracker not show it's correct position?为什么 Jcrop-tracker 不显示它的正确位置？
【发布时间】：2014-03-13 10:05:39
【问题描述】：

在我的应用中，用户可以从他们的设备上拍照或上传图片。此图像是 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());

});

});

【问题讨论】：

你能发布一些我们可以直接测试的东西吗？（我缺少一些 html 源代码，所以一个小提琴或其他东西会很方便）
我猜你的问题源于没有使用“正确”的图像尺寸，分别没有将它们“转移”到实际的屏幕/显示尺寸！此外，使用max-height: 100% 可能会导致图像的纵横比发生变化（当图像的高度高于 100% 宽度的视口高度时）。我认为您必须根据视口宽度转换图片的宽度和高度，进行裁剪并将裁剪转换回原始图像大小。
嗯，你可能有一个观点。知道如何将图像转换为视口宽度的大小吗？
也可以在问题中包含您的 HTML 吗？
我计算了这里引用的 12 个 DOM 元素，但没有提供 DOM。没有 HTML 就无法调试此代码，因为它很可能与您的页面布局有关。

标签： javascript jquery css jcrop

【解决方案1】：

先生，很抱歉未能及时回复您。谢谢大家回答我的问题。

我度过了一个非常忙碌的一周，所以我几乎没有时间从事这个项目。今天又捡起来了，先尝试自己再解决这个问题。

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

【讨论】：

【解决方案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 }

【讨论】：