Jcrop 选择区域得到高度答案

【问题标题】：Jcrop selection area getting heightJcrop 选择区域得到高度
【发布时间】：2018-03-14 05:29:07
【问题描述】：

我使用 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 左右。

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

-> 重新构建 HTML / 移除的父元素高度（正如我的许多帖子所建议的那样）

-> 删除 boxHeight : 并且只给定盒子

-> 尝试 x2, y2 操作

-> 使用 jcrop truesize 尝试事件。

【问题讨论】：

标签： jquery html image-processing crop jcrop

【解决方案1】：

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

同样可以通过setImage管理

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

所以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'));

【讨论】：