DEfusion.org.uk

leonidas: Not sure if you where talking to me or not, but I put the code I used for multiple crops per page on my last comment. It works perfect for me, I have 100 images loading on a page all with crop, all submit with the correct crop values. Plus I didn’t change much at all to the code really, just sending the image id back in the callback, and setting the field updates to use the image id. Let me know if you didn’t understand what I did I will try to explain better.

Amazing! Thank you, Dave!

I wonder if “Frank” ever finalized his plan – multiple crops on one image. That’s exactly what i would require now, but i can’t seem to get there – at least not without patching the whole code – which would be far off my project deadline. Anyway, i wanted to ask if you could interconnect me with “Frank” to find out how he managed that problem. Or maybe you have a suggestion?

Kind regards, leonidas

Can anybody help me turn this into a profile picture tumbnail maker – like the one on facebook – thanks

Amazing script. I considered three or four other scripts, got about half way through customizing most (and completely finished one), when I came across this. Ditched everything else and went full-speed using your Cropper and, my goodness, it’s perfect.

The cropping tool is now live and in-use by everyone at my site. Thank you SO MUCH for putting this out, and especially under the BSD.

Sorry, that didnt paste in too well!

It’s at http://solomon.ie/onEndCrop.txt if anyone wants it

Firstly, many thanks for such a great script!

One thing I wanted to do was submit the xy values to my server side cropping script via a hidden form on double click of the crop area and saw that someone asked the same thing so I made a mod to do that.

Basically it works on the bases that onEndCrop() gets called every time you click, so I modified it to detect a double click and submit my form.

var TimeOfLastClick =0; // init at page load
function onEndCrop( coords, dimensions )
{
$( ‘x1’ ).value = coords.x1;
$( ‘y1’ ).value = coords.y1;
$( ‘x2’ ).value = coords.x2;
$( ‘y2’ ).value = coords.y2;
$( ‘width’ ).value = dimensions.width;
$( ‘height’ ).value = dimensions.height;

// get time of this click in milseconds
var thisClick=new Date();
var thisClickMs = thisClick.getTime();

// if this click happened within 300ms of last one it’s
// a double click so submit a form named ‘cropform’
if ((thisClickMs – TimeOfLastClick)

Great peice of code!

Slightly modifed to allow multiple img cropps per page.

My usage of it requires multiple images to be cropped per page. Its an admin function for my site so I can crop hundreds of images on one page.

I added the image id to the callback function. And use the image id to identify the image being edited to update the correct text fields.

So modifed the callback line in cropper.js to:
this.options.onEndCrop(this.img.id, this.areaCoords,{width:this.calcW(),height:this.calcH()});

The callback function I just changed to use the img id to identify which text fields to update:
function onEndCrop( img_id, coords, dimensions ) {
$( ‘x1_’+img_id).value = coords.x1;
$( ‘y1_’+img_id).value = coords.y1;
$( ‘x2_’+img_id).value = coords.x2;
$( ‘y2_’+img_id).value = coords.y2;
$( ‘width_’+img_id).value = dimensions.width;
$( ‘height_’+img_id).value = dimensions.height;
}

Very simple if you need to crop allow of images per page.

by changing image src propoerty by javascript. in browser new image is loading in cropping window, but not in preview window.
I have any idea how to reload window in preview window too?
Anyone would help?

rapra

good spcript, but I have a problem:
I am loading a page with empty field. I choosed cropping with preview.
I am choosing an image with input type=”file” field and onChange I am loading choosed by file field image into by changing

hi Dave,

It does exactly what I need it to do, thank you very much
it is working perfectly fine, also easy to understand, i use it in my asp.net project.
thanks once again.

Thanks. but that link is not in english language :S

If you want to transfer the cropping dates to PHP you can use the following way.

1. onevent read hidden form elements in which are the coords
2. calling ajax to transfer it to the server

Here is an example:
http://familientagebuch.de/rainer/2006/50.html#5

With this variant you cal also crop the image with imagemagick (convert)

How do i pas the crop parameters to PHP?
I’m looking at using phpthumb and your javascript Cropper UI to send crop parameters to phpthumb.
Thankyou

It was discussed many times, what Javascript can’t handle or process images, only server side script like PHP, asp or any other. Look for more details or tutorials in search englines.

Does anyone have a javascript code to save a cropped image?

Hi,
i have a question about a cropper.
It is possible to use dinamic image change and image preview function?
If ‘YES’ can U tell me how i can do this?
Raker

Hello,
Just wanted to say awesome tool! It does exactly what I need it to do. But I am having an issue. IM on IE 6 and what IM doing is IM grabbing the coordinates using your tool and putting it into a form on the same page. I then submit the form via post and using PHP I store the information in a database. The problem is when the page refreshes the image is blank. I have to hit refresh for it to show up again. If I go to IE options and choose look for a new version on every visit instead of automatically then it works just fine. Any suggestions?

I really like this but i’m not sure if this can be done or not. Is it possible to save the preview picture as a image in a directory?? any help would be great.

Thanks Dave for your quick response!
So far I have managed to update the textboxes whilst resizing by adding to onDrag (had to use 1.5.0 final of prototype), now for when you move the selection around. I’m slightly unsure where this function is?
Also if I wanted to type values in the textboxes and have them displayed would I use setAreaCoords?

Thanks for your time!