语义ui模型与cropper.js

Question

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

1)页面上有一个名为SelectImage的按钮

2)如果我点击“选择图像”，一个模式是打开的，名字是拇指。拇指模式有2个按钮从本地pc和选择媒体。

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

4)如果我点击“选择媒体”按钮，它们会打开媒体模式，而我在那里有很多图像，而我在每幅图像上有一个按钮，如果我点击图像路径，就会传递到以前的模式，称为“拇指”，并且指定了裁剪工具，但是尺寸比给定的尺寸要小，如果我打开的话，就可以检查镀铬折叠器大小的。

您将更好地使用以下图像。

http://prnt.sc/cnof60

http://prnt.sc/cnofei

http://prnt.sc/cnofne

http://prnt.sc/cnofxs

如果看到最后两幅图像，你可以在图像上有所区别。

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

谢谢

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
}));

收割机js中的806至809行