The scale does not match the image zoom

matiasgali / guillotine

jQuery plugin to crop images within an area (fully responsive), allowing to drag (touch support), zoom and rotate.

http://guillotine.js.org

327 stars 100 forks source link

The scale does not match the image zoom #28

Closed kikolino closed 9 years ago

kikolino commented 9 years ago

Make a test but no was possible crop image in php by scale

matiasgali commented 9 years ago

If you found a case where the scale doesn't match the zoom defined by the user, please provide a clear description of the issue and a code sample that demonstrates it.

Nelrohd commented 9 years ago

I just extended on my own the plugin (yeah i should have done a PR, my bad) and the 'scale' property was fine. I just have to say it wasn't clear what was really the 'scale' property because the 'w' and 'h' stay the same but in fact the image is bigger. It took me an hour to figure out I needed to get the image itself dimensions.

matiasgali commented 9 years ago

If you follow the steps from the setup in order it should be clear enough, w and h return the same dimensions defined at the beginning of the example (width and height). Step 5 also highlights that rotation and scale should be applied first.

To sum up, first you zoom the original image by multiplying its dimensions by scale, apply rotation if needed, move x pixels from the left, y pixels from the top and finally crop an area of w by h pixels. It's based on how ImageMagick works to make it as easy as posible.

If needed I'll try to make some time to review it and make it more obvious.

Nelrohd commented 9 years ago

Thank to clarify. I thought x and y were taken from the original image, before the scale. Make more sense now. Maybe it's because I was using this https://github.com/blueimp/JavaScript-Load-Image and it asks for x and y from the original image.

gitn00b1337 commented 9 years ago

Can you guys please clarify how this works because I'm merely looking at the demo & am very confused.

Excuse the second screenshot being in paint, the flipping thing kept screenshotting my wrong screen! :)

Anyway, image #1 shows the original image is size 2509 x 1673 px. The size zoomed to is 1065 x 710 The width & height required is 400 x 300 The frame is 600 x 453px

So surely to get scale it should be...

1065 / 2509 = 0.424 double check with height: 710 / 1673 = 0.424

These are off a little after those decimals, but close enough. Am I doing something wrong? I would hugely appreciate you explaining if so!

On the second screenshot you can see scale is listed as 0.2888.

It is my understanding that the width/height of 400x300 and the x/y positions are used ON the scaled image afterwards? This is hugely giving me grief, any help is really appreciated.

Nelrohd commented 9 years ago

400x300 is what you want. The size when your image is displayed doesn't matter. To do the crop, apply the scale & rotation, then move x/y then crop w by h. So yeah the w/h and x/y are on the rotated scaled image.

gitn00b1337 commented 9 years ago

My issue was that I was scaling & cropping as your documents said, but it was cropping the wrong area and scaling was wierd. As far as I could tell there wasnt any bug in my server code, and I got the same results when I used others on stackoverflow. I am just confused what the scale depends on then if it's not got anything to do with the displayed image? Thanks for your time

matiasgali commented 9 years ago

Guys please don't use the issue tracker for questions. Use Guitter's chat room or any of the other means listed in the CONTRIBUTING file instead.