Jcrop选择区域越来越高

Question

我已经使用Jcrop v2.0.0在弹出窗口中裁剪图像。

以下是我的Javascript代码。

var imageCropWidth = 0;
var imageCropHeight = 0;
var cropPointX = 0;
var cropPointY = 0;

$('#CropImage').attr('src', '/Users/3/images/Umbraco.jpg');
$(document).ready(function () {
        initCrop();
    });

    function initCrop() {
        $('#CropImage').Jcrop({
            onSelect: setCoordsAndImgSize,
            boxWidth: 260,
            //boxHeight: 260,
        });
    }

function setCoordsAndImgSize(e) {
imageCropWidth = e.w;
        imageCropHeight = e.h;

        cropPointX = e.x;
        cropPointY = e.y;
}

现在使用boxWidth后，我很难获得所选裁剪区域的准确x，y坐标，我认为这是由于Jcrop将高度添加到Image左右。

到目前为止我所尝试的是：

- ＆GT;重新构造HTML /删除的父元素高度（如我所建议的多篇文章）

- ＆GT;删除boxHeight：并且只给出带有

的框

- ＆GT;尝试使用x2，y2操作

- ＆GT;事件尝试使用jcrop truesize。

Answer 1

找到解决方案，问题是当动态加载图像时，因此jcrop占用了最后一张图像的大小。

同样可以通过setImage管理

  

setImage（SelectedImage.attr（＆＃39; SRC＆＃39;））;

所以JS代码将是。

var jcrop_api;

function initCrop() {
        var ratioW = ($('#CropImage')[0].naturalWidth);
        var ratioH = ($('#CropImage')[0].naturalHeight); 
        $('#CropImage').Jcrop({
            onSelect: setCoordsAndImgSize,
            boxWidth: 260,
            boxHeight: 260,
            setSelect: [0, 0, ratioW, ratioH]
        }, function () {
            jcrop_api = this;
        });
    }

//调用图像更改

jcrop_api.setImage(SelectedImage.attr('src'));