Resizable box to crop image

[Maccaday]

(I forgot the title last time - oops)

Hi,

I'm trying to make a very simple online image-cropper, that can be used to import images from a user's computer to a server, crop them, and save them to a server.

I have found a site that can upload the image, and can move round a box of set size, but I need to be able to resize the box. Is it possible to create a resizable box using Javascript, that would display the cropped image in another part of the page?

Any comments would be most gratefully received.

 

[tviman]

You can't do this type of image editing with javascript. Javascript can resize the image but as far as cropping parts of the image to create a new image requires the use of an actual image editor. (Images are actually mathematical "functions" that render the various colors at the proper pixel locations of the image.)

There's always a better way. The fun is trying to find it!

 

[adam0101]

You could, however, resize a div that dynamically clips the image in it so the user could get a preview of what the cropped image looks like. You'd have to send the information to a server-side process to actually perform the crop though.

Adam
while(ignorance==true){perpetuate(violence,fear,hatred);life=life-1};

 

[Maccaday]

Thanks, I thought that the process would probably involve some kind of server-side script.

What do you mean by a 'div'?

What language/program could I use on the server-side to do the cropping?

Thanks.

 

[adam0101]

I mean a <div></div> html tag. I don't know of any server-side image editing programs.

Adam
while(ignorance==true){perpetuate(violence,fear,hatred);life=life-1};

 

[tviman]

A word of note: you can't crop an image that resides on a server that you don't have access to. You'll have to do your image manipulation on a copy of the image that resides on the local machine (the user's PC).

As far as I am aware, there are no browser-based image editing programs available. You would need something like Photoshop or Paint Shop Pro to do your image editing.

There's always a better way. The fun is trying to find it!

 

[Maccaday]

Thanks both of you.

tviman - the images that I would crop would probably reside on the server, and would have been uploaded from the clients machine.

As for actually being able to crop the image online, I have no experience of it. However, the basic idea of what I'm trying to do is very similar to this page:

http://www.mobicust.com/mob/perso/41898?

but with being able to resize the rectangle. They appear to have done this using Javascript, at least the visual side of it, anyway.

Several results are sent, including various co-ordinates, but I don't know how these are used to crop the image, or more specifically, what program or script might then use these figures to crop the image.

Thanks for any further responses.

 

[Maccaday]

I've just noticed that the features on the link that I have written above include all the ones that I need, it's just that the resizing needs to be done in a specific place on the drag box.

I have also found some online image-editors that may be of interest. The best ones that I have found are here:

http://www.izhuk.com/

(Image editor and Photo processing (Java))

though I didn't actually look for that long.

Thank you both for your comments.

 

[EdwardMartinIII]

I don't know of a client-side method of cropping an image, but client-side resizing of the display of an image is very do-able.

Cheers,


Edward

&quot;Cut a hole in the door. Hang a flap. Criminy, why didn't I think of this earlier?!&quot; -- inventor of the cat door

 

[EdwardMartinIII]

There's a method to do that here:
thread216-644087

Cheers,


Edward

&quot;Cut a hole in the door. Hang a flap. Criminy, why didn't I think of this earlier?!&quot; -- inventor of the cat door

 

[2xdafun]

http://labs.silverorange.com/a/photogallery/photocropper/?process=1&image=image6

 

[BillyRayPreachersSon]

Is it possible that ASP.Net has any image cropping abilities with it's GDI stuff? There are a lot of image manipulation routines available, so I would have thought a crop function would have been there somewhere.

If it is, you could mock up a nice crop interface using DIVs, and pass the relevant information back to the server using hidden fields to store the new dimension info, crop the image, save it, and then redisplay it.

Just a thought!

Dan

 

[Maccaday]

2xdafun,

Thanks for the link.

I had a good look over the silverorange site, and downloaded the source code for the Flash (and Java) version of their image cropper. I haven't learnt much about Flash yet, and the image cropper doesn't quite do exactly what I want, but I think I should be able to use it for my purposes.

Cheers again.

 

[wallsmirrors]

Sorry to bump such an old thread, but I am trying to do what Maccaday was doing. The link Maccaday found at the end is no longer working...Can someone direct me to a Java and/or Flash image cropper w/ source code?

 

[Maccaday]

Here you go. It's the same site, just a different part of it.

http://labs.silverorange.com/archives/2003/june/mayitakeyour

You might want to have a look round the labs section. They're a pretty good company, and post some interesting bits of code. They also did the logos for Mozilla's Firefox and Thunderbird.

With respect to image cropping, it should actually be fairly easy to do with a combination of Javascript and PHP. You'd display the image on screen, and would use Javascript to measure out the area that you want to crop, storing the co-ordinates in a variable. Then, you'd send these co-ordinates to a PHP script (by *submitting* the page) that used one of the image functions to crop the image, save it (initially as a temporary file), and refresh the page for the user to check. Doing it this way will result in slightly quicker loading times, and is more likely to be immediately usable by end users, since they won't need to install Flash to use it (if they haven't already got it installed).

I haven't actually written the code yet for it, since the project that I'm working on has taken a lot longer to plan than I had previously thought, but this is the way I'll be doing it.

Good luck with whatever you'd doing.