Simple image cropping using cropper.js and PHP

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.

Recommended Posts:


Prem Tiwari

An engineer by profession and a passionate blogger by heart. Founder of FreeWebMentor.com (A Programming blog for beginners), Tech Speaker at various forums. A part from this he is an open source enthusiast, WordPress Lover, Blogger, SEO, and Growth Strategic.

Article 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.

Solved Programs