by jQuery, Software & Utilities

jQuery Upload/Crop Image: Upload & Crop Image With PHP & jQuery

Upload & Crop Image using PHP  jQuery

jQuery upload/crop image tool use for upload and crop different types of images, JPG, GIFs and PNG and you can now upload images and have a random file name (this fixes the caching issue some of you have had) you need “Image Area Select” plugin.

What we needed was a way to upload a JPG image, resize it if required then crop it to given height and width.

Please feel free to join us and you are always welcome to share your thoughts even if you have more reference links related to other tips and tricks that our readers may like.
Don’t forget to Subscribe to our  RSS-feed subscribe to our RSS-feed and
Follow us on  Twitter follow us on Twitter — for recent updates.

1. Firstly we created a form to allow us to upload an image. Pretty basic, nothing flashy there.

2. Capture, rename and resize the uploaded file. (We also provided a set name for the uploaded file.)

3. Now that the image has been uploaded and saved to our folder we can use the “Image Area Select” plugin to crop our image.

It basically provides the coordinates to the server to handle the crop.

  • x1, y1 = coordinates of the top left corner of the initial selection area
  • x2, y2 = coordinates of the bottom right corner of the initial selection area
  • width = crop selection width
  • height = crop selection height

There are a number of options with this plugin which you can see using the link above. We opted for an aspect ratio of 1:1 (height and width of 100px) along with a preview of what we are actually going to crop.

Download jQuery Upload/Crop Image

Requirement: jQuery, PHP & PHP  GD Library
Demo: http://www.webmotionuk.co.uk/jquery/image_upload_crop.php
Download: http://www.webmotionuk.co.uk/jquery/jquery_upload_crop.zip

Advertisements
Author:
We hope, We will become the best, creative and inspiring community for web and graphics. Join Us! Can be part of the growing Team. Just write something Creative and Interesting. Click here to become a member.

Comments

Trackbacks to this post.
Leave a Reply

Copyright © 2020 Freebies, Free Fonts, WordPress Themes, Logos & Tutorials. All Rights Reserved.
Powered by Wordpress.
About Us | Advertise | Write For Us | Contact Us
2 Shares
Tweet
Share
Share
Pin