mardi 12 avril 2016

How to prevent over-zooming with Croppie (JavaScript image cropping plugin)

I have a very basic Croppie div being initialized like 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' successfully gets loaded into the croppie-container, however Croppie is adding a "scale" style to the image, in hand zooming the image in by 4X.

scale(4.1667);

'test_img/jpg' is already small enough (212px x 248px) to be moved within the 100px x 100px viewport window to be cropped, so I don't want the image to be zoomed in. Even after copying the code samples on Croppie's site, I still have the same problem. Any idea why Croppie is magnifying my image when I don't want it to? (See image) enter image description here

In order for this to work, I would need to upload images 4X the size I want to fit in a 100px x 100px frame, which is ridiculous. Please let me know if you need more info.

Thanks!

Croppie docs: http://ift.tt/1TPZmlR




Aucun commentaire:

Enregistrer un commentaire