semantic ui modal und cropper.js

Question

Ich versuche, cropper.js in semantic modal hinzuzufügen. Ich mache folgenden Schritt.

1) Ich habe Taste auf Seite [Bild auswählen] genannt

2) Wenn ich eine modal wählen klicken bin auf dem Bild ist offen Name ist [Daumen]. Daumen Modal haben 2 Taste [wählen Sie von lokalen PC] und [wählen Sie Medien].

3) Wenn ich von den lokalen PC-Dateidialog wählen klicken bin auf offen und Bild-Picker arbeitet und cropper.js auf ausgewähltes Bild wird zuweisen perfekten

4) Wenn i-Taste Medien wählen, klicken Sie sich auf sie öffnen [media] modal und ich habe viele Bilder dort und ich habe eine Schaltfläche auf jedem Bild, wenn ich auf Bild klicken Pfad ist Pass auf vorherige modale aufgerufen Daumen und cropper Werkzeug zugewiesen ist, aber die Größe ist kleiner als die angegebene Größe, wenn Ich bin offen zu prüfen, Element von Chrom cropper Größe ist perfekt.

Sie werden eine bessere Idee mit folgenden Bildern.

http://prnt.sc/cnof60

http://prnt.sc/cnofei

http://prnt.sc/cnofne

http://prnt.sc/cnofxs

Wenn Sie letzten 2 Bilder sehen Unterschied in der Bild können.

Ich benutze https://fengyuanchen.github.io/cropperjs/ für cropper Funktion.

Dank

Answer 1

Wenn Sie Ihre cropper init minContainerWidth und minContainerHeight passieren. hier bin vorbei i 846 und 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 
})); 

Zeilennummer 806-809 in cropper js