Wie über Zoomen mit Croppie (JavaScript Bildbeschneidungs ​​Plugin)

Question

Ich habe ein sehr einfaches Croppie Div, wird wie so initialisiert verhindern:

HTML:

<div id="upload-avatar" class="croppie-container"></div> 

JavaScript:

$uploadCrop = $('#upload-avatar').croppie({ 
    viewport: { 
     width: 100, 
     height: 100, 
     type: 'square' 
    }, 
    url: 'test_img.jpg' 
}); 

$('#upload-avatar').croppie('bind'); 

'test_img.jpg' wird erfolgreich in den Croppie-Container geladen, Croppie fügt dem Bild jedoch einen "Skalierungs" -Stil hinzu, indem es das Bild manuell um das Vierfache vergrößert.

scale(4.1667); 

‚test_img/jpg‘ ist schon klein genug (212px x 248px) innerhalb des 100px x 100px Darstellungsfenster verschoben werden abgeschnitten werden, so will ich nicht in das Bild hineingezoomt werden. Auch nach Wenn ich die Codebeispiele auf Croppies Seite kopiere, habe ich immer noch das selbe Problem. Irgendeine Idee, warum Croppie mein Bild vergrößert, wenn ich es nicht will? (Siehe Bild)

Damit dies funktioniert, müsste ich Bilder 4X der Größe hochladen, die ich in einen 100px x 100px Rahmen passen möchte, was lächerlich ist. Bitte lassen Sie mich wissen, wenn Sie weitere Informationen benötigen.

Danke!

Croppie docs: http://foliotek.github.io/Croppie/#documentation

Answer 1

Ich glaube, ich es herausgefunden. Nach dem Auskommentieren des "Bind" -Aufrufs verhält es sich wie erwartet. Seltsam.

$('#upload-avatar').croppie({ 
    viewport: { 
     width: 100, 
     height: 100, 
     type: 'square' 
    }, 
    url: json.file 
}); 
//$('#upload-avatar').croppie('bind'); //Commenting this line, fixed it!