Croppie: Allow transparent space around img

Created on 25 Feb 2016  路  5Comments  路  Source: Foliotek/Croppie

Is there any way to allow the user to zoom out the image so much so that the entire image is visible, and transparent pixels are added around it? The problem with the cropper now is that if the image isn't the exact dimensions of the cropper there's no way to fit the whole image inside the crop area.

To explain further, in your first example here http://foliotek.github.io/Croppie/ what I'd like to be able to do is fit the entire image of the guy on the wall INSIDE the circle. Right now that doesn't seem to be doable.

Thanks

Zooming Related

Most helpful comment

try

$("#imagen").croppie('result', { type: 'canvas',format :'jpeg', backgroundColor:'white'}).then(function(resp){ //--- your code })

All 5 comments

Seems like this one is being requested more often recently.

I'm thinking we can make this an optional parameter to pass into the croppie initialization.

Yeah, this is what I was also talking about. It's really needed!

I've added an enforceBoundary option to the croppie constructor. By default it's true, but if you set it to false, you should be able to drag around and zoom freely without being restricted to the viewport.

After adding this, it seems like you really need the ability to set a minimum zoom.

I'd like to see this with the ability to set the filler colour instead of just using transparent which results in ugly black bars for jpegs.

try

$("#imagen").croppie('result', { type: 'canvas',format :'jpeg', backgroundColor:'white'}).then(function(resp){ //--- your code })

Was this page helpful?
0 / 5 - 0 ratings