Семантический пользовательский интерфейс модальный и cropper.js

Question

Я пытаюсь добавить cropper.js в семантической модальной. я делаю следующий шаг.

1) У меня есть кнопка на странице под названием [Выбрать изображение]

2) Если я нажму на выбор изображения, то один модальный это открытый имя [превью]. Модальные большие пальцы имеют 2 кнопки [выбрать из локального компьютера] и [выбрать медиа].

3) Если я нажму на кнопку "Выбрать из локального ПК", откроется диалоговое окно, появится окно выбора изображений, и cropper.js назначен для выбранного изображения.

4) Если я нажимаю на кнопку выбора медиа, они открывают [медиа] модальный, и у меня там много изображений, и у меня есть одна кнопка на каждом изображении, если я нажимаю на путь к изображению, переход к предыдущему модалу называется большими пальцами, и назначается инструмент кадрирования. но размер меньше заданного размера, если я открыт, проверяю элемент хромового размера идеален.

Вам будет лучше, используя следующие изображения.

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

Строка с 806 по 809 в кроппере