Adjust image to container about cropit

[DevotionGeo]

@scottcheng when we set minZoom: to 'fit', the image while zoomed out moves freely. The user is not always very genius, so sometimes they move image to one side of the canvas (example-1), how can we force it centered while its smaller than the canvas (example-2)?
Following are the example images.

---

example-1 :

---

example-2 :

---

[nyn0x]

@DevotionGeo I fixed with css :
.cropit-preview-image{ float: left; }

[scottcheng]

Sorry I don't quite understand what you mean here. So we have a square cropping box and the user uploads a non-square image, I'm not quite sure what you mean by "fitting the image on the container"? Perhaps some screenshots would help a lot.

[tomByrer]

I'm thinking @javiermarinros wants the image to automatically fill one axis (height or width) with the other axis to overflow/be-cropped?

[scottcheng]

@tomByrer Isn't that how it currently works? See the first demo on the website.

[javiermarinros]

Here it's an example: I have a big horizontal photo that I want to use as an square icon. With cropit, I can't fit it into the container.

This is what I can do now:

And this what I want to achieve:

I hope I've explained myself

[scottcheng]

@javiermarinros Thanks for clarifying. So you want to zoom the image so it's smaller than the container. The tricky part here is a) what's the smallest zoom you want the image to be able to go? Should it be small enough to fit the width or the height? and b) what do we do with the part outside the image? Fill with #fff?

In fact there are two undocumented options fitWidth and fitHeight. For example, if you pass in fitWidth: true, you will be able to zoom out until the image width fits the container width, even if the height goes smaller than the container:

But then you won't be able to drag it up and down, and the exported image will not include the part outside of the image.

I guess technically what you are suggesting is not really "cropping"; it feels more like "expanding"... I agree that a cropper could support such functionality, but would have to add multiple option parameters, e.g. minimum zoom and background fill color. What do you think?

[javiermarinros]

I think that, as you said, the smallest zoom should be that able to fit the width or height of the image. And the background can be transparent for PNG images, and the color given in the option fillBg introduced in PR#19 for JPEGs.

You've most of the work done with fitWidth and fitHeight! It works exactly as I expected, but it would be better if the user can drag the image up and down.

[scottcheng]

@javiermarinros @phunksta I've added a minZoom option in 34f79e3 which works as follows:

minZoom decides the minimal zoom level of the image. If set to 'fill', the image has to fill the preview area, i.e. both width and height must not go smaller than the preview area. If set to 'fit', the image can shrink further to fit the preview area, i.e. at least one of its edges must not go smaller than the preview area.

The default value is 'fill', consistent with previous default setting. Feel free to try it out (it's in the current master) and let me know how it works for you. Thanks!

[javiermarinros]

It works like a charm! For other users that wanted to replicate the same behaviour, you must set minZoom to fit and freeMove to true and you'll get a image cropper that allows the user to upload an image of any shape and adjust and center it to the size you need for your app.

Thank you!

[scottcheng]

@javiermarinros Thanks for testing! Did you have to set freeMove to true to move the image around after zooming out? You should be able to achieve what you described above in the screenshot by only setting minZoom to fit. It doesn't allow you to drag the image off the preview area, but you should be able to drag it up and down, if the image is wider than the preview area.

[javiermarinros]

That's true! I didn't tried without freeMove, but it's better if the image cannot go off the preview area. Thank you!

[PhilBlackRose]

Hey @scottcheng,
Sorry for the delay, I'm back on the project using cropit today.
After some initial 'duh' moments (I'm quite noob with github) I found the new source in the master and tried it out.
Brilliant! what more do I need to say? It works very nicely indeed thank you!

What's more you can now brag that yours is pretty much the only crop plugin that allows you to do this gracefully!

The only possible improvement I could think of is having buttons on the cropit form that allow this mode to be toggled. Is that just a case of changing the options object, or would the form need re-initialising?

Thanks again!

[scottcheng]

@phunksta Thanks for trying it out!

Regarding toggling the mode, I don't think changing the options object is the best approach. Neither is re-initializing. Ideally there should be an API for it, e.g. $el.cropit('minZoom', 'fit'). Do you have a real world use case for this?

[PhilBlackRose]

No I think for our purposes what you've added is perfect. I just wasn't clear on how the options work, and you've answered that.
Thanks again! 

-------- Original message --------
From: Scott Cheng [email protected]
Date: 17/02/2015 5:59 PM (GMT+00:00)
To: scottcheng/cropit [email protected]
Cc: phunksta [email protected]
Subject: Re: [cropit] Adjust image to container (#20)

@phunksta Thanks for trying it out!

Regarding toggling the mode, I don't think changing the options object is the best approach. Neither is re-initializing. Ideally there should be an API for it, e.g. $el.cropit('minZoom', 'fit'). Do you have a real world use case for this?

—
Reply to this email directly or view it on GitHub.

[Mattrad1]

If user crop an image 1 time and then want to crop the the croped image again.it does not show the image.How I can fix it?

[CyrPen]

.cropit-preview-image{ float: left; }

Exactly what i was looking for ! Thanks

[kacpermaciejevvski]

Is there any way to 'cut' those 'transparent' sides of generated image, if the container is bigger than the image?

[shadaba1974]

how to add flip/flop button along rotation button? any idea, please let me know?