3

I am currently building a Image cropping tool for a client the front end allows users to upload and image and zoom in / out and pan the zoomed image until they are happy.

This is all working fine, it starts to get complicated when i need to crop this image the tool uses css transforms to zoom in and out and handle the panning when i post this through to my PHP script i get an array such as this one:

(
[0] => 0.4095092758326518
[1] =>  0
[2] =>  0
[3] =>  0.4095092758326518
[4] =>  -1257.469970703125
[5] =>  -441.6499938964844
)

i have worked out that [0] is a scale factor and [4] and [5] are my x,y locations, to get the correct locations i have divided my x and y locations by the scale factor in key 0.

I then need get the width and height of my viewport that i am cropping to (e.g) 329px x 237px this is scaled down by a scale factor of 0.277 (and the final output needs to be scaled up to match this)

I am using the WideImage php library however also have access to imageMagick,

My code for working out my final x, y and Width and Height values looks like this:

$width = $vport['w']/$scale;
$height = $vport['h']/$scale;
$posY = (abs($matrix[5]))/$matrix[0];
$posX = (abs($matrix[4]))/$matrix[0];

Where $matrix is my CSS transform array and $scale is = 0.277

This just doesn't seem to work its close however at certain zoom levels it breaks. I appreciate that i may not be clear on whats wrong or what the issue is to be honest i don't know myself. If anyone has built something like this or has some advice on where i may be going wrong that would be great.

Tom :)

tvance
  • 83
  • 6
  • I had to do something similar and took the approach of handling all image manipulation server side (imagick - which I like a lot better than wideimage/gd) and then just load it via ajax. This way you don't have duplicate logic code sitting around. – hendr1x Oct 03 '13 at 18:31
  • @hendr1x that sounds promising, how did you handle zooming on the images? i assume you cropped the image and then used the offset that imagemagick allows for panning? – tvance Oct 03 '13 at 18:35
  • Yeah...it was a real pain honestly because I allowed for white space to be added to the image...if you want I will post the code for you....it won't be drop in but it will give you an idea on my approach. – hendr1x Oct 03 '13 at 18:49

0 Answers0