modal-dialog - 语义 ui 模态和cropper.js

Question

我尝试在语义模式中添加cropper.js。我正在执行以下步骤。

1)我在页面上有一个名为[选择图像]

的按钮

2)如果我单击选择图像，则打开一个模式，名称为[thumbs]。 拇指模式有 2 个按钮[从本地电脑选择]和[选择媒体]。

3) 如果我单击“从本地电脑文件中选择”，对话框将打开，并且图像选择器正在工作，并且cropper.js 会完美分配给所选图像

4)如果我点击选择媒体按钮，它们会打开[media]模式，并且我有很多图像，并且如果我点击图像路径，则每个图像上都有一个按钮分配给以前的称为拇指和裁剪工具的模式，但尺寸小于给定尺寸，如果我打开，检查 Chrome 裁剪器尺寸的元素是完美的。

使用以下图片您会更好地理解。

http://prnt.sc/cnof60

http://prnt.sc/cnofei

http://prnt.sc/cnofne

http://prnt.sc/cnofxs

如果看到最后 2 张图像，您可以发现图像有所不同。

我正在使用https://fengyuanchen.github.io/cropperjs/用于裁剪功能。

谢谢

Answer 1

当您初始化裁剪器时，传递 minContainerWidth 和 minContainerHeight。这里我通过了 846 和 280。

var image = $("#img-preview-media-mobile");
var cropper = image.cropper(
{
    dragMode: 'move',
    autoCropArea: 1,
    cropBoxMovable: false,
    cropBoxResizable: false,
    viewMode: 3,
    minContainerWidth: 846,
    minContainerHeight: 280,
    crop: function(e) 
    {
        var image_data = e.x +"#"+ e.y +"#846#280";
        $("#img-preview-media-web-image-data").val(image_data);
    }
});


and in cropper.js file change following line

/*$cropper.css((this.container = {
    width: max($container.width(), num(options.minContainerWidth) || 200),
    height: max($container.height(), num(options.minContainerHeight) || 100)
}));*/

$cropper.css((this.container = {
    width: options.minContainerWidth ,
    height: options.minContainerHeight
}));

cropper js中的行号806到809