A simple jQuery image cropping script.
Steps to crop image:
- Choose the image by clicking on browse button
- Upload the selected image
- Perform cropping action
- Click on submit button
- Cropped image would be generated.
Below is the form for uplaoding image, you can download the full source code and also perform the demonstration of this script.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 |
<!DOCTYPE html> <html lang="en"> <head> <title>Upload File and Crop</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="css/cropimage.css" /> <link type="text/css" href="css/imgareaselect-default.css" rel="stylesheet" /> <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.form.js"></script> <script type="text/javascript" src="js/jquery.imgareaselect.js"></script> <script type="text/javascript" > $(document).ready(function() { $('#submitbtn').click(function() { $("#viewimage").html(''); $("#viewimage").html('<img src="images/loading.gif" />'); $(".uploadform").ajaxForm({ url: 'upload.php', success: showResponse }).submit(); }); }); function showResponse(responseText, statusText, xhr, $form){ if(responseText.indexOf('.')>0){ $('#thumbviewimage').html('<img src="<?php echo $upload_path; ?>'+responseText+'" style="position: relative;" alt="Thumbnail Preview" />'); $('#viewimage').html('<img class="preview" alt="" src="<?php echo $upload_path; ?>'+responseText+'" id="thumbnail" />'); $('#filename').val(responseText); $('#thumbnail').imgAreaSelect({ aspectRatio: '1:1', handles: true , onSelectChange: preview }); }else{ $('#thumbviewimage').html(responseText); $('#viewimage').html(responseText); } } </script> <script type="text/javascript"> function preview(img, selection) { var scaleX = <?php echo $thumb_width;?> / selection.width; var scaleY = <?php echo $thumb_height;?> / selection.height; $('#thumbviewimage > img').css({ width: Math.round(scaleX * img.width) + 'px', height: Math.round(scaleY * img.height) + 'px', marginLeft: '-' + Math.round(scaleX * selection.x1) + 'px', marginTop: '-' + Math.round(scaleY * selection.y1) + 'px' }); var x1 = Math.round((img.naturalWidth/img.width)*selection.x1); var y1 = Math.round((img.naturalHeight/img.height)*selection.y1); var x2 = Math.round(x1+selection.width); var y2 = Math.round(y1+selection.height); $('#x1').val(x1); $('#y1').val(y1); $('#x2').val(x2); $('#y2').val(y2); $('#w').val(Math.round((img.naturalWidth/img.width)*selection.width)); $('#h').val(Math.round((img.naturalHeight/img.height)*selection.height)); } $(document).ready(function () { $('#save_thumb').click(function() { var x1 = $('#x1').val(); var y1 = $('#y1').val(); var x2 = $('#x2').val(); var y2 = $('#y2').val(); var w = $('#w').val(); var h = $('#h').val(); if(x1=="" || y1=="" || x2=="" || y2=="" || w=="" || h==""){ alert("Please Make a Selection First"); return false; }else{ return true; } }); }); </script> </head> <body> <!-- content --> <section> <div class="container"> <div class="crop_box"> <form class="uploadform" method="post" enctype="multipart/form-data" action='upload.php' name="photo"> <div class="crop_set_upload"> <div class="crop_upload_label">Upload files: </div> <div class="crop_select_image"><div class="file_browser"><input type="file" name="imagefile" id="imagefile" class="hide_broswe" /></div></div> <div class="crop_select_image"><input type="submit" value="Upload" class="upload_button" name="submitbtn" id="submitbtn" /></div> </div> </form> <div class="crop_set_preview"> <div class="crop_preview_left"> <div class="crop_preview_box_big" id='viewimage'> </div> </div> <div class="crop_preview_right"> Preview (150x150 px) <div class="crop_preview_box_small" id='thumbviewimage' style="position:relative; overflow:hidden;"> </div> <form name="thumbnail" action="<?php echo $_SERVER["PHP_SELF"];?>" method="post"> <input type="hidden" name="x1" value="" id="x1" /> <input type="hidden" name="y1" value="" id="y1" /> <input type="hidden" name="x2" value="" id="x2" /> <input type="hidden" name="y2" value="" id="y2" /> <input type="hidden" name="w" value="" id="w" /> <input type="hidden" name="h" value="" id="h" /> <input type="hidden" name="wr" value="" id="wr" /> <input type="hidden" name="filename" value="" id="filename" /> <div class="crop_preview_submit"><input type="submit" name="upload_thumbnail" value="Save Thumbnail" id="save_thumb" class="submit_button" /> </div> </form> </div> </div> </div> </div> </section> </body> </html> |
[easy_media_download url=”https://www.tangleskills.com/wp-content/uploads/cropimage.zip”]DEMO