Image rotate with JQuery and PHP

Question

i have a list of thumbnails! i am able to rotate a image with jquery, but after i refresh the page, the image is the same! i want to make a SAVE button to save all the edited images? how i can save the edited image on the server side?

thanks

Answer 1

Use GDs imagerotate on the server.

When the client is done rotating, send an AJAX post to the server with the ID of the image and the angle of rotation and call this function.

Answer 2

A quick Google search returned link text. It looks promising.

Answer 3

You cannot have the jquery image save to the server. What you need to do instead is have a PHP script that actually does the rotation (the jquery is just used for quick interface systems).

You can use GD imagerotate, or ImageMagick (which is far more powerful)

Answer 4

I wrote a similar system a little while back. The general idea was like this:

• Image is uploaded to server.
• Server saves image with random unique id in some directory, makes an entry in the users session saving relevant details and the file name.
• On the front end, the user can choose between different actions, like "rotate 90 degrees CCW", "apply b/w filter" etc.
• These actions are sent to the server, either via AJAX or POST, it doesn't matter.

• The server adds these "filters" to a list saved in the session, which may look something like this (simplified):

  array(
      'iuh98ho98p980' => array(
          'file' => 'xyz.jpg',
          'filters' => array(
              0 => array('type' => 'rotate', 'degree' => 90),
              1 => array('type' => 'grayscale')
              ...
  

• To show an image to the user, it is linked to a special URL, like
  <img src="outputimage.php?iuh98ho98p980" />.

• When the browser requests this image URL, the script outputimage.php dynamically generates the image from the original file, applying all filters.
  • The image could also be rendered by a separate worker thread or as soon as a filter is applied, whatever works better.

To enable caching, each "variant" of an image (the image with certain filters applied) is identified by a hash of its filters. A generated "variant" is saved in a cache directory. The hash is also appended to the URL, so it can be cached browser-side too.

Hope this gets you on the right track, I'll leave the implementation details up to you.