Today, We want to share with you .
In this post we will show you jquery image crop and upload, hear for jquery crop and resize image before upload we will give you demo and example for implement.
In this post, we will learn about crop and save image using jquery and php with an example.
PHP Upload and Crop Image using jQuery Ajax
There are the Following The simple About PHP Upload and Crop Image using jQuery Ajax Full Information With Example and source code.
As I will cover this Post with live Working example to develop , so the some major files and Directory structures for this example is following below.
- index.php
- image-crop.php
- uploads – Directory
- jquery.Jcrop.min.js
- jquery.min
- jquery.Jcrop.min
PHP Image Crop and Upload using JQuery
Step 1 : index.php
PHP Upload and Crop Image using jQuery Ajax/title> body { width: 550px; font-family: Arial; } .bgColor { width: 100%; height: 150px; background-color: #fff4be; border-radius: 4px; margin-bottom: 30px; } .inputFile { padding: 5px; background-color: #3d3d3d; border: #F0E8E0 1px solid; border-radius: 4px; } .btnSubmit { background-color: #696969; border-radius: 4px; border: #696969 1px solid; color: #3d3d3d; margin-top: 10px; padding: 5px 30px; } #profileFormLive { padding: 20px; } input#live_crop_img_source { background: lightseagreen; border: #485c61 1px solid; color: #FFF; padding: 5px 25px 5px 25px; visibility: hidden; } #live_img_crop { margin-top: 40px; } <img src="" id="card_img_box" class="img" />
$(document).ready(function(){ var pic_size; $('#card_img_box').Jcrop({ aspectRatio: 1, onSelect: function(c){ pic_size = {x:c.x,y:c.y,w:c.w,h:c.h}; $("#live_crop_img_source").css("visibility", "visible"); } }); $("#live_crop_img_source").click(function(){ var img = $("#card_img_box").attr('src'); $("#live_img_crop").show(); $("#live_img_crop").attr('src','image-crop.php?x='+pic_size.x+'&y='+pic_size.y+'&w='+pic_size.w+'&h='+pic_size.h+'&img='+img); }); });
Upload and Crop Image using PHP
Step 2 : image-crop.php
Jquery image upload and crop for PHP – Output
My Paka Knowledgeable Ideas, Tips and Tricks, Useful Content, Jobs, Technology, Earn Money, gmail creation, skype, yahoo and more useful things.
Angular 6 CRUD Operations Application Tutorials
Angular 6 Example
Angular Latest My Previous Post With Source code Read more…..
- Angular 6 Folder Project Structure
- Angular 6 CLI Installation
- Angular 6 Module File
- Angular 6 Components
- Angular 6 Services
- Angular 6 Routing
- Angular 6 CSS
- Angular 6 Class Binding
- Angular 6 Animation
- Angular 6 Templating
- Angular 6 HTTP Client
Read :
Summary
You can also read about AngularJS, ASP.NET, VueJs, PHP.
I hope you get an idea about Jquery image upload and crop for PHP.
I would like to have feedback on my Pakainfo.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post Example Source code, don’t forget to share.