语义UI模态和cropper.js

Question

我尝试在语义模态中添加cropper.js。我正在做下面的步骤。

1)我在页面上有一个按钮叫做[选择图像]

2)如果我点击选择图像一个模式是打开的名称是[拇指]。拇指模态有两个按钮[选择本地pc]和[选择媒体]。

3)如果我点击从本地pc选择文件对话框打开，图像选择器正在工作，cropper.js被分配给所选的图像完美

4)如果我点击选择媒体按钮，他们打开[媒体]模态，我有很多图像，我在每个图像上有一个按钮，如果我点击图像路径被传递到以前的模态称为拇指和裁剪工具被分配，但尺寸小于给定的尺寸，如果我打开检查元素的chrome裁剪器尺寸是完美的

你最好使用下面的图片。

http://prnt.sc/cnof60

http://prnt.sc/cnofei

http://prnt.sc/cnofne

http://prnt.sc/cnofxs

如果你看到最后两张图片，你可以在图像的差异。

我使用https://fengyuanchen.github.io/cropperjs/作为cropper函数。

谢谢

Answer 1

当你初始化你的cropper传递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
}));