Simple image cropping using cropper.js and PHP

Prem Tiwari - - Freebies, Jquery, PHP Tutorial


Hi friends, hope you are doing good. Today i am going to share how you can crop a simple image using cropper.js and PHP. This is a simple jQuery image cropping plugin cropper.js.

The cropper js inherits from the size of the image’s parent element (wrapper), so be sure to wrap the image with a visible block elements and outputted cropped data bases on the original image size, so you can use them to crop the image directly.

croper-600

Download      Demo

Features Lists :

  • Supports touch (mobile)
  • Supports zooming
  • Supports rotating
  • Supports scaling (flipping)
  • Supports multiple croppers
  • Supports to crop on a canvas
  • Supports to crop image in the browser-side by canvas
  • Supports to translate Exif Orientation information
  • Cross-browser support

Server Dependencies

– PHP 5.5+

Browser Support

  • – Chrome (latest 2)
  • – Firefox (latest 2)
  • – Internet Explorer 8+
  • – Opera (latest 2)
  • – Safari (latest 2)

Include JS files:

PHP Code ‘crop.php’ to crop the image

HTML Code

How to do when I got an Unknown upload error ?

You might upload a huge image, just configure the `upload_max_filesize`, `post_max_size` and `memory_limit` of your `php.ini` file. Or check the **php_error.log** file to find out the problem.

Download      Demo

If you still need any help, then feel free to put your comments in below comment section. Do you like & share this article with your friends, and don’t forget to follow us on Facebook and Twitter to learn cool tutorials.


Prem Tiwari

Prem Tiwari is the founder of FreeWebMentor.com and also a professional developer and a blogger by hobby.

Tags: , , ,

8 thoughts on “Simple image cropping using cropper.js and PHP”

    1. I got the answer for my own :

      imagedestroy($src_img);
      imagedestroy($dst_img);

      // add this line after the above script ( line 180 )

      if (file_exists($src)) { // remove the original image
      unlink($src);
      }

  1. This is awesome stuff.. Been racking my brain though how to stop the cropper from changing to a square. Spent several hours poking at the code without any luck.. If the cropper ratio state could be overwritten at a higher level that would be a huge improvement for re-use.

  2. hello, thanks for the great project. Your script is wprking perfectly on localhost. but on the live webserver, i get “parseerror” on trying to crop(ie pressing the done button) i have checked conso;e log but have not found any trace or sugesstion as to why the error. can you please point out why i am getting this error please. and if it may help,the folder have been given read/write permissions

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.