Wie um zu verhindern, dass über-Zoomen mit Croppie (JavaScript, Bild beschneiden, plugin)

Ich habe eine sehr einfache Croppie div initialisiert werden, zum Beispiel so:

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‘ erfolgreich geladen wird in die croppie-container, jedoch Croppie ist das hinzufügen eines „scale“ – Stil, das Bild, in der hand Zoomen Sie das Bild von 4X.

scale(4.1667);

‚test_img/jpg“ ist schon klein genug (212px x 248px) verschoben werden, die innerhalb des 100px x 100px viewport-Fenster werden abgeschnitten, so dass ich nicht wollen, dass das Bild gezoomt werden. Auch nach kopieren der code-Beispiele auf Croppie Website, ich habe immer noch das gleiche problem. Keine Ahnung warum Croppie Vergrößerung mein Bild, wenn ich es nicht will? (Siehe Bild)
Wie um zu verhindern, dass über-Zoomen mit Croppie (JavaScript, Bild beschneiden, plugin)

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

Dank!

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

InformationsquelleAutor st_443 | 2016-04-12



One Reply
  1. 0

    Ich denke, dass ich es herausgefunden. Nach dem auskommentieren der „bind“ – Aufruf, es sich so verhält, wie ich es erwarten würde. Seltsam..

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

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.