语义 ui 模态和 cropper.js

Question

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

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

的按钮

2) 如果我点击选择图像，一个模态打开的名称是 [thumbs]。拇指模态有 2 个按钮 [从本地电脑选择] 和 [选择媒体].

3) 如果我单击“从本地 pc 文件中选择”对话框打开并且图像选择器正在工作并且 cropper.js 被分配给选定的图像完美

4) 如果我点击选择媒体按钮，它们会打开 [媒体] 模式，我在那里有很多图片，如果我点击，我在每张图片上都有一个按钮在图像路径上传递给以前的称为拇指的模态并分配裁剪工具但尺寸小于给定尺寸，如果我打开检查 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行

语义 ui 模态和 cropper.js

semantic ui modal and cropper.js

modal-dialog

semantic-ui

cropper