{"id":2888,"date":"2017-10-26T18:50:10","date_gmt":"2017-10-26T18:50:10","guid":{"rendered":"https:\/\/www.codexworld.com\/?p=2888"},"modified":"2018-12-06T21:05:34","modified_gmt":"2018-12-06T21:05:34","slug":"live-image-upload-crop-resize-using-jquery-php","status":"publish","type":"post","link":"https:\/\/www.codexworld.com\/live-image-upload-crop-resize-using-jquery-php\/","title":{"rendered":"Live Image Upload, Crop and Resize using jQuery and PHP"},"content":{"rendered":"<p>Cropping image before upload, always a great idea for server space optimization. Crop feature helps to resize the image as per the required size before uploading on the server. You can reduce the web page size and load time by showing the image with exact display size. The image need to cropped to display the exact dimensions (width and height) in the web page. If your web application has image upload functionality, <b>image crop and resize<\/b> is very useful.<\/p>\n<p>You can easily <a href=\"https:\/\/www.codexworld.com\/upload-image-create-thumbnail-using-php\/\">upload image and create thumbnail using PHP<\/a>. But if you want <b>live image upload<\/b> and crop, jQuery needs to be used with PHP. The jQuery can help to select an area (coordinates) of the image and PHP can help to crop, resize, and upload the image on the server. There are many jQuery plugins available for cropping image, imgAreaSelect is one of them. The imgAreaSelect plugin helps to select an area of an image and implement image cropping and resizing functionality. In this tutorial, we will show you how to upload, crop, and resize image using jQuery and PHP.<\/p>\n<p>Before you get started to implement live image upload and crop functionality, take look the files structure.<\/p>\n<pre style=\"background: transparent;color:#080808;border: none;\">image_upload_crop_jquery_php<span style=\"color:#794938\">\/<\/span>\r\n\u251c\u2500\u2500 index.html\r\n\u251c\u2500\u2500 upload.php\r\n\u251c\u2500\u2500 js<span style=\"color:#794938\">\/<\/span>\r\n\u2502   \u251c\u2500\u2500 jquery.imgareaselect.js\r\n\u2502   \u2514\u2500\u2500 jquery.min.js\r\n\u251c\u2500\u2500 css<span style=\"color:#794938\">\/<\/span>\r\n\u2502   \u2514\u2500\u2500 imgareaselect.css\r\n\u2514\u2500\u2500 uploads<span style=\"color:#794938\">\/<\/span>\r\n    \u2514\u2500\u2500 images<span style=\"color:#794938\">\/<\/span>\r\n        \u2514\u2500\u2500 thumb<span style=\"color:#794938\">\/<\/span>\r\n<\/pre>\n<h2>JavaScript Code<\/h2>\n<p><b>jQuery library:<\/b><br \/>\nAt first, include the jQuery library file.<\/p>\n<pre><span class=\"hljs-comment\" style=\"color: rgb(108, 107, 90);\">&lt;!-- jQuery library --&gt;<\/span>\r\n<span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">script<\/span> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"js\/jquery.min.js\"<\/span>&gt;<\/span><span class=\"undefined\"><\/span><span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">script<\/span>&gt;<\/span><\/pre>\n<p><b>imgAreaSelect Plugin:<\/b><br \/>\nThe imgAreaSelect plugin will be used to implement image crop functionality. Include the imgAreaSelect plugin library file.<\/p>\n<pre><span class=\"hljs-comment\" style=\"color: rgb(108, 107, 90);\">&lt;!-- imgAreaSelect jQuery plugin --&gt;<\/span>\r\n<span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">link<\/span> <span class=\"hljs-attr\">rel<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"stylesheet\"<\/span> <span class=\"hljs-attr\">href<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"css\/imgareaselect.css\"<\/span> \/&gt;<\/span>\r\n<span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">script<\/span> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"js\/jquery.imgareaselect.js\"<\/span>&gt;<\/span><span class=\"undefined\"><\/span><span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">script<\/span>&gt;<\/span><\/pre>\n<p>The following JavaScript code generates an instant image preview and allows the user to select an area of the image.<\/p>\n<ul class=\"bullet_disk_list\">\n<li><b>checkCoords()<\/b> \u2013 Thie method checks whether the user selects a region of the image to crop.<\/li>\n<li><b>updateCoords()<\/b> \u2013 This method set the coordinates, width, and height to the hidden input fields.<\/li>\n<li><b>HTML5 FileReader<\/b> is used to generate an instant preview of the selected image.<\/li>\n<li><b>imgAreaSelect<\/b> \u2013 To enable selection on an image, wrap it in a jQuery object and call the <code>imgAreaSelect()<\/code> method.<\/li>\n<\/ul>\n<pre><span class=\"hljs-comment\" style=\"color: rgb(125, 122, 104);\">\/\/ Check coordinates<\/span>\r\n<span class=\"hljs-function\"><span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">function<\/span> <span class=\"hljs-title\" style=\"color: rgb(102, 132, 225);\">checkCoords<\/span>(<span class=\"hljs-params\" style=\"color: rgb(182, 86, 17);\"><\/span>)<\/span>{\r\n    <span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">if<\/span>(<span class=\"hljs-built_in\" style=\"color: rgb(182, 86, 17);\">parseInt<\/span>($(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'#w'<\/span>).val())) <span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">return<\/span> <span class=\"hljs-literal\" style=\"color: rgb(182, 86, 17);\">true<\/span>;\r\n    alert(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'Please select a crop region then press upload.'<\/span>);\r\n    <span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">return<\/span> <span class=\"hljs-literal\" style=\"color: rgb(182, 86, 17);\">false<\/span>;\r\n}\r\n\r\n<span class=\"hljs-comment\" style=\"color: rgb(125, 122, 104);\">\/\/ Set image coordinates<\/span>\r\n<span class=\"hljs-function\"><span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">function<\/span> <span class=\"hljs-title\" style=\"color: rgb(102, 132, 225);\">updateCoords<\/span>(<span class=\"hljs-params\" style=\"color: rgb(182, 86, 17);\">im,obj<\/span>)<\/span>{\r\n    <span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">var<\/span> img = <span class=\"hljs-built_in\" style=\"color: rgb(182, 86, 17);\">document<\/span>.getElementById(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">\"imagePreview\"<\/span>);\r\n    <span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">var<\/span> orgHeight = img.naturalHeight;\r\n    <span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">var<\/span> orgWidth = img.naturalWidth;\r\n\t\r\n    <span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">var<\/span> porcX = orgWidth\/im.width;\r\n    <span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">var<\/span> porcY = orgHeight\/im.height;\r\n\t\r\n    $(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'input#x'<\/span>).val(<span class=\"hljs-built_in\" style=\"color: rgb(182, 86, 17);\">Math<\/span>.round(obj.x1 * porcX));\r\n    $(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'input#y'<\/span>).val(<span class=\"hljs-built_in\" style=\"color: rgb(182, 86, 17);\">Math<\/span>.round(obj.y1 * porcY));\r\n    $(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'input#w'<\/span>).val(<span class=\"hljs-built_in\" style=\"color: rgb(182, 86, 17);\">Math<\/span>.round(obj.width * porcX));\r\n    $(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'input#h'<\/span>).val(<span class=\"hljs-built_in\" style=\"color: rgb(182, 86, 17);\">Math<\/span>.round(obj.height * porcY));\r\n}\r\n\r\n$(<span class=\"hljs-built_in\" style=\"color: rgb(182, 86, 17);\">document<\/span>).ready(<span class=\"hljs-function\"><span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">function<\/span>(<span class=\"hljs-params\" style=\"color: rgb(182, 86, 17);\"><\/span>)<\/span>{\r\n    <span class=\"hljs-comment\" style=\"color: rgb(125, 122, 104);\">\/\/ Prepare instant image preview<\/span>\r\n    <span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">var<\/span> p = $(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">\"#imagePreview\"<\/span>);\r\n    $(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">\"#fileInput\"<\/span>).change(<span class=\"hljs-function\"><span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">function<\/span>(<span class=\"hljs-params\" style=\"color: rgb(182, 86, 17);\"><\/span>)<\/span>{\r\n        <span class=\"hljs-comment\" style=\"color: rgb(125, 122, 104);\">\/\/fadeOut or hide preview<\/span>\r\n        p.fadeOut();\r\n\t\t\r\n        <span class=\"hljs-comment\" style=\"color: rgb(125, 122, 104);\">\/\/prepare HTML5 FileReader<\/span>\r\n        <span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">var<\/span> oFReader = <span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">new<\/span> FileReader();\r\n        oFReader.readAsDataURL(<span class=\"hljs-built_in\" style=\"color: rgb(182, 86, 17);\">document<\/span>.getElementById(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">\"fileInput\"<\/span>).files[<span class=\"hljs-number\" style=\"color: rgb(182, 86, 17);\">0<\/span>]);\r\n\t\t\r\n        oFReader.onload = <span class=\"hljs-function\"><span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">function<\/span>(<span class=\"hljs-params\" style=\"color: rgb(182, 86, 17);\">oFREvent<\/span>)<\/span>{\r\n            p.attr(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'src'<\/span>, oFREvent.target.result).fadeIn();\r\n        };\r\n    });\r\n\t\r\n    <span class=\"hljs-comment\" style=\"color: rgb(125, 122, 104);\">\/\/ Implement imgAreaSelect plugin<\/span>\r\n    $(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'#imagePreview'<\/span>).imgAreaSelect({\r\n        onSelectEnd: updateCoords\r\n    });\r\n});<\/pre>\n<h2>HTML Code<\/h2>\n<p>The following HTML creates an image upload form to select an image.<\/p>\n<ul class=\"bullet_disk_list\">\n<li>The hidden input fields hold the coordinates info of the selected image.<\/li>\n<li>Once the user selects an image, the preview will be shown and the user can select an area on the image to crop.<\/li>\n<li>After selecting the image region, the form will be submitted to the upload.php for server-side processing.<\/li>\n<\/ul>\n<pre><span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">form<\/span> <span class=\"hljs-attr\">method<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"post\"<\/span> <span class=\"hljs-attr\">action<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"upload.php\"<\/span> <span class=\"hljs-attr\">enctype<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"multipart\/form-data\"<\/span> <span class=\"hljs-attr\">onsubmit<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"return checkCoords();\"<\/span>&gt;<\/span>\r\n    <span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">p<\/span>&gt;<\/span>Image: <span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">input<\/span> <span class=\"hljs-attr\">name<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"image\"<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"fileInput\"<\/span> <span class=\"hljs-attr\">size<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"30\"<\/span> <span class=\"hljs-attr\">type<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"file\"<\/span> \/&gt;<\/span><span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">p<\/span>&gt;<\/span>\r\n    <span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">input<\/span> <span class=\"hljs-attr\">type<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"hidden\"<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"x\"<\/span> <span class=\"hljs-attr\">name<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"x\"<\/span> \/&gt;<\/span>\r\n    <span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">input<\/span> <span class=\"hljs-attr\">type<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"hidden\"<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"y\"<\/span> <span class=\"hljs-attr\">name<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"y\"<\/span> \/&gt;<\/span>\r\n    <span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">input<\/span> <span class=\"hljs-attr\">type<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"hidden\"<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"w\"<\/span> <span class=\"hljs-attr\">name<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"w\"<\/span> \/&gt;<\/span>\r\n    <span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">input<\/span> <span class=\"hljs-attr\">type<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"hidden\"<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"h\"<\/span> <span class=\"hljs-attr\">name<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"h\"<\/span> \/&gt;<\/span>\r\n    <span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">input<\/span> <span class=\"hljs-attr\">name<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"upload\"<\/span> <span class=\"hljs-attr\">type<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"submit\"<\/span> <span class=\"hljs-attr\">value<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"UPLOAD\"<\/span> \/&gt;<\/span>\r\n<span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">form<\/span>&gt;<\/span>\r\n<span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">p<\/span>&gt;<\/span><span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">img<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"imagePreview\"<\/span> <span class=\"hljs-attr\">style<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"display:none;\"<\/span>\/&gt;<\/span><span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">p<\/span>&gt;<\/span><\/pre>\n<h2>Image Upload and Crop (upload.php)<\/h2>\n<p>The <code>upload.php<\/code> file handles the image upload, crop, and resize functionality using PHP.<\/p>\n<ul class=\"bullet_disk_list\">\n<li>Validate the image type.<\/li>\n<li>Upload image using <b>move_uploaded_file()<\/b> function in PHP.<\/li>\n<li>Crop and resize image using PHP.\n<ul>\n<li><b>imagecreatetruecolor()<\/b> \u2013 Create a new true color image.<\/li>\n<li><b>imagecreatefromgif() \/ imagecreatefromjpeg() \/ imagecreatefrompng()<\/b> \u2013 Create a new image from file or URL.<\/li>\n<li><b>imagecopyresampled()<\/b> \u2013 Copy and resize part of an image.<\/li>\n<li><b>imagegif() \/ imagejpeg() \/ imagepng()<\/b> \u2013 Output image to file.<\/li>\n<li><b>imagedestroy()<\/b> &#8211; Destroy sample image.<\/li>\n<\/ul>\n<\/li>\n<li>Display cropped image.<\/li>\n<\/ul>\n<pre><span style=\"color: #0000BB\">&lt;?php<br \/>$error&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;<\/span><span style=\"color: #DD0000\">''<\/span><span style=\"color: #007700\">;<br \/><br \/><\/span><span style=\"color: #FF8000\">\/\/&nbsp;If&nbsp;the&nbsp;upload&nbsp;form&nbsp;is&nbsp;submitted<br \/><\/span><span style=\"color: #007700\">if(isset(<\/span><span style=\"color: #0000BB\">$_POST<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #DD0000\">\"upload\"<\/span><span style=\"color: #007700\">])){<br \/>&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #FF8000\">\/\/&nbsp;Get&nbsp;the&nbsp;file&nbsp;information<br \/>&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$fileName&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;<\/span><span style=\"color: #0000BB\">basename<\/span><span style=\"color: #007700\">(<\/span><span style=\"color: #0000BB\">$_FILES<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #DD0000\">\"image\"<\/span><span style=\"color: #007700\">][<\/span><span style=\"color: #DD0000\">\"name\"<\/span><span style=\"color: #007700\">]);<br \/>&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$fileTmp&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;<\/span><span style=\"color: #0000BB\">$_FILES<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #DD0000\">\"image\"<\/span><span style=\"color: #007700\">][<\/span><span style=\"color: #DD0000\">\"tmp_name\"<\/span><span style=\"color: #007700\">];<br \/>&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$fileType&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;<\/span><span style=\"color: #0000BB\">$_FILES<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #DD0000\">\"image\"<\/span><span style=\"color: #007700\">][<\/span><span style=\"color: #DD0000\">\"type\"<\/span><span style=\"color: #007700\">];<br \/>&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$fileSize&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;<\/span><span style=\"color: #0000BB\">$_FILES<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #DD0000\">\"image\"<\/span><span style=\"color: #007700\">][<\/span><span style=\"color: #DD0000\">\"size\"<\/span><span style=\"color: #007700\">];<br \/>&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$fileExt&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;<\/span><span style=\"color: #0000BB\">substr<\/span><span style=\"color: #007700\">(<\/span><span style=\"color: #0000BB\">$fileName<\/span><span style=\"color: #007700\">,&nbsp;<\/span><span style=\"color: #0000BB\">strrpos<\/span><span style=\"color: #007700\">(<\/span><span style=\"color: #0000BB\">$fileName<\/span><span style=\"color: #007700\">,&nbsp;<\/span><span style=\"color: #DD0000\">\".\"<\/span><span style=\"color: #007700\">)&nbsp;+&nbsp;<\/span><span style=\"color: #0000BB\">1<\/span><span style=\"color: #007700\">);<br \/>&nbsp;&nbsp;&nbsp;&nbsp;<br \/>&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #FF8000\">\/\/&nbsp;Specify&nbsp;the&nbsp;images&nbsp;upload&nbsp;path<br \/>&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$largeImageLoc&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;<\/span><span style=\"color: #DD0000\">'uploads\/images\/'<\/span><span style=\"color: #007700\">.<\/span><span style=\"color: #0000BB\">$fileName<\/span><span style=\"color: #007700\">;<br \/>&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$thumbImageLoc&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;<\/span><span style=\"color: #DD0000\">'uploads\/images\/thumb\/'<\/span><span style=\"color: #007700\">.<\/span><span style=\"color: #0000BB\">$fileName<\/span><span style=\"color: #007700\">;<br \/><br \/>&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #FF8000\">\/\/&nbsp;Check&nbsp;and&nbsp;validate&nbsp;file&nbsp;extension<br \/>&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #007700\">if((!empty(<\/span><span style=\"color: #0000BB\">$_FILES<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #DD0000\">\"image\"<\/span><span style=\"color: #007700\">]))&nbsp;&amp;&amp;&nbsp;(<\/span><span style=\"color: #0000BB\">$_FILES<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #DD0000\">\"image\"<\/span><span style=\"color: #007700\">][<\/span><span style=\"color: #DD0000\">\"error\"<\/span><span style=\"color: #007700\">]&nbsp;==&nbsp;<\/span><span style=\"color: #0000BB\">0<\/span><span style=\"color: #007700\">)){<br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if(<\/span><span style=\"color: #0000BB\">$fileExt&nbsp;<\/span><span style=\"color: #007700\">!=&nbsp;<\/span><span style=\"color: #DD0000\">\"jpg\"&nbsp;<\/span><span style=\"color: #007700\">&amp;&amp;&nbsp;<\/span><span style=\"color: #0000BB\">$fileExt&nbsp;<\/span><span style=\"color: #007700\">!=&nbsp;<\/span><span style=\"color: #DD0000\">\"jpeg\"&nbsp;<\/span><span style=\"color: #007700\">&amp;&amp;&nbsp;<\/span><span style=\"color: #0000BB\">$fileExt&nbsp;<\/span><span style=\"color: #007700\">!=&nbsp;<\/span><span style=\"color: #DD0000\">\"png\"&nbsp;<\/span><span style=\"color: #007700\">&amp;&amp;&nbsp;<\/span><span style=\"color: #0000BB\">$fileExt&nbsp;<\/span><span style=\"color: #007700\">!=&nbsp;<\/span><span style=\"color: #DD0000\">\"gif\"<\/span><span style=\"color: #007700\">){<br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$error&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;<\/span><span style=\"color: #DD0000\">\"Sorry,&nbsp;only&nbsp;JPG,&nbsp;JPEG,&nbsp;PNG,&nbsp;and&nbsp;GIF&nbsp;files&nbsp;are&nbsp;allowed.\"<\/span><span style=\"color: #007700\">;<br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}<br \/>&nbsp;&nbsp;&nbsp;&nbsp;}else{<br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$error&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;<\/span><span style=\"color: #DD0000\">\"Select&nbsp;an&nbsp;image&nbsp;file&nbsp;to&nbsp;upload.\"<\/span><span style=\"color: #007700\">;<br \/>&nbsp;&nbsp;&nbsp;&nbsp;}<br \/>&nbsp;<br \/>&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #FF8000\">\/\/&nbsp;If&nbsp;everything&nbsp;is&nbsp;ok,&nbsp;try&nbsp;to&nbsp;upload&nbsp;file<br \/>&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #007700\">if(empty(<\/span><span style=\"color: #0000BB\">$error<\/span><span style=\"color: #007700\">)&nbsp;&amp;&amp;&nbsp;!empty(<\/span><span style=\"color: #0000BB\">$fileName<\/span><span style=\"color: #007700\">)){<br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if(<\/span><span style=\"color: #0000BB\">move_uploaded_file<\/span><span style=\"color: #007700\">(<\/span><span style=\"color: #0000BB\">$fileTmp<\/span><span style=\"color: #007700\">,&nbsp;<\/span><span style=\"color: #0000BB\">$largeImageLoc<\/span><span style=\"color: #007700\">)){<br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #FF8000\">\/\/&nbsp;File&nbsp;permission<br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">chmod<\/span><span style=\"color: #007700\">(<\/span><span style=\"color: #0000BB\">$largeImageLoc<\/span><span style=\"color: #007700\">,&nbsp;<\/span><span style=\"color: #0000BB\">0777<\/span><span style=\"color: #007700\">);<br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #FF8000\">\/\/&nbsp;Get&nbsp;dimensions&nbsp;of&nbsp;the&nbsp;original&nbsp;image<br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #007700\">list(<\/span><span style=\"color: #0000BB\">$width_org<\/span><span style=\"color: #007700\">,&nbsp;<\/span><span style=\"color: #0000BB\">$height_org<\/span><span style=\"color: #007700\">)&nbsp;=&nbsp;<\/span><span style=\"color: #0000BB\">getimagesize<\/span><span style=\"color: #007700\">(<\/span><span style=\"color: #0000BB\">$largeImageLoc<\/span><span style=\"color: #007700\">);<br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #FF8000\">\/\/&nbsp;Get&nbsp;image&nbsp;coordinates<br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$x&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;(int)&nbsp;<\/span><span style=\"color: #0000BB\">$_POST<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #DD0000\">'x'<\/span><span style=\"color: #007700\">];<br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$y&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;(int)&nbsp;<\/span><span style=\"color: #0000BB\">$_POST<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #DD0000\">'y'<\/span><span style=\"color: #007700\">];<br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$width&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;(int)&nbsp;<\/span><span style=\"color: #0000BB\">$_POST<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #DD0000\">'w'<\/span><span style=\"color: #007700\">];<br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$height&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;(int)&nbsp;<\/span><span style=\"color: #0000BB\">$_POST<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #DD0000\">'h'<\/span><span style=\"color: #007700\">];<br \/><br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #FF8000\">\/\/&nbsp;Define&nbsp;the&nbsp;size&nbsp;of&nbsp;the&nbsp;cropped&nbsp;image<br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$width_new&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;<\/span><span style=\"color: #0000BB\">$width<\/span><span style=\"color: #007700\">;<br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$height_new&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;<\/span><span style=\"color: #0000BB\">$height<\/span><span style=\"color: #007700\">;<br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #FF8000\">\/\/&nbsp;Create&nbsp;new&nbsp;true&nbsp;color&nbsp;image<br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$newImage&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;<\/span><span style=\"color: #0000BB\">imagecreatetruecolor<\/span><span style=\"color: #007700\">(<\/span><span style=\"color: #0000BB\">$width_new<\/span><span style=\"color: #007700\">,&nbsp;<\/span><span style=\"color: #0000BB\">$height_new<\/span><span style=\"color: #007700\">);<br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #FF8000\">\/\/&nbsp;Create&nbsp;new&nbsp;image&nbsp;from&nbsp;file<br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #007700\">switch(<\/span><span style=\"color: #0000BB\">$fileType<\/span><span style=\"color: #007700\">)&nbsp;{<br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;case&nbsp;<\/span><span style=\"color: #DD0000\">\"image\/gif\"<\/span><span style=\"color: #007700\">:<br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$source&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;<\/span><span style=\"color: #0000BB\">imagecreatefromgif<\/span><span style=\"color: #007700\">(<\/span><span style=\"color: #0000BB\">$largeImageLoc<\/span><span style=\"color: #007700\">);&nbsp;<br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;<br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;case&nbsp;<\/span><span style=\"color: #DD0000\">\"image\/pjpeg\"<\/span><span style=\"color: #007700\">:<br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;case&nbsp;<\/span><span style=\"color: #DD0000\">\"image\/jpeg\"<\/span><span style=\"color: #007700\">:<br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;case&nbsp;<\/span><span style=\"color: #DD0000\">\"image\/jpg\"<\/span><span style=\"color: #007700\">:<br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$source&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;<\/span><span style=\"color: #0000BB\">imagecreatefromjpeg<\/span><span style=\"color: #007700\">(<\/span><span style=\"color: #0000BB\">$largeImageLoc<\/span><span style=\"color: #007700\">);&nbsp;<br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;<br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;case&nbsp;<\/span><span style=\"color: #DD0000\">\"image\/png\"<\/span><span style=\"color: #007700\">:<br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;case&nbsp;<\/span><span style=\"color: #DD0000\">\"image\/x-png\"<\/span><span style=\"color: #007700\">:<br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$source&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;<\/span><span style=\"color: #0000BB\">imagecreatefrompng<\/span><span style=\"color: #007700\">(<\/span><span style=\"color: #0000BB\">$largeImageLoc<\/span><span style=\"color: #007700\">);&nbsp;<br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;<br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}<br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #FF8000\">\/\/&nbsp;Copy&nbsp;and&nbsp;resize&nbsp;part&nbsp;of&nbsp;the&nbsp;image<br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">imagecopyresampled<\/span><span style=\"color: #007700\">(<\/span><span style=\"color: #0000BB\">$newImage<\/span><span style=\"color: #007700\">,&nbsp;<\/span><span style=\"color: #0000BB\">$source<\/span><span style=\"color: #007700\">,&nbsp;<\/span><span style=\"color: #0000BB\">0<\/span><span style=\"color: #007700\">,&nbsp;<\/span><span style=\"color: #0000BB\">0<\/span><span style=\"color: #007700\">,&nbsp;<\/span><span style=\"color: #0000BB\">$x<\/span><span style=\"color: #007700\">,&nbsp;<\/span><span style=\"color: #0000BB\">$y<\/span><span style=\"color: #007700\">,&nbsp;<\/span><span style=\"color: #0000BB\">$width_new<\/span><span style=\"color: #007700\">,&nbsp;<\/span><span style=\"color: #0000BB\">$height_new<\/span><span style=\"color: #007700\">,&nbsp;<\/span><span style=\"color: #0000BB\">$width<\/span><span style=\"color: #007700\">,&nbsp;<\/span><span style=\"color: #0000BB\">$height<\/span><span style=\"color: #007700\">);<br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #FF8000\">\/\/&nbsp;Output&nbsp;image&nbsp;to&nbsp;file<br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #007700\">switch(<\/span><span style=\"color: #0000BB\">$fileType<\/span><span style=\"color: #007700\">)&nbsp;{<br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;case&nbsp;<\/span><span style=\"color: #DD0000\">\"image\/gif\"<\/span><span style=\"color: #007700\">:<br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">imagegif<\/span><span style=\"color: #007700\">(<\/span><span style=\"color: #0000BB\">$newImage<\/span><span style=\"color: #007700\">,&nbsp;<\/span><span style=\"color: #0000BB\">$thumbImageLoc<\/span><span style=\"color: #007700\">);&nbsp;<br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;<br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;case&nbsp;<\/span><span style=\"color: #DD0000\">\"image\/pjpeg\"<\/span><span style=\"color: #007700\">:<br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;case&nbsp;<\/span><span style=\"color: #DD0000\">\"image\/jpeg\"<\/span><span style=\"color: #007700\">:<br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;case&nbsp;<\/span><span style=\"color: #DD0000\">\"image\/jpg\"<\/span><span style=\"color: #007700\">:<br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">imagejpeg<\/span><span style=\"color: #007700\">(<\/span><span style=\"color: #0000BB\">$newImage<\/span><span style=\"color: #007700\">,&nbsp;<\/span><span style=\"color: #0000BB\">$thumbImageLoc<\/span><span style=\"color: #007700\">,&nbsp;<\/span><span style=\"color: #0000BB\">90<\/span><span style=\"color: #007700\">);&nbsp;<br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;<br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;case&nbsp;<\/span><span style=\"color: #DD0000\">\"image\/png\"<\/span><span style=\"color: #007700\">:<br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;case&nbsp;<\/span><span style=\"color: #DD0000\">\"image\/x-png\"<\/span><span style=\"color: #007700\">:<br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">imagepng<\/span><span style=\"color: #007700\">(<\/span><span style=\"color: #0000BB\">$newImage<\/span><span style=\"color: #007700\">,&nbsp;<\/span><span style=\"color: #0000BB\">$thumbImageLoc<\/span><span style=\"color: #007700\">);&nbsp;&nbsp;<br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;<br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}<br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #FF8000\">\/\/&nbsp;Destroy&nbsp;image<br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">imagedestroy<\/span><span style=\"color: #007700\">(<\/span><span style=\"color: #0000BB\">$newImage<\/span><span style=\"color: #007700\">);<br \/><\/span><span style=\"color: #FF8000\"><br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\/\/&nbsp;Display&nbsp;cropped&nbsp;image<br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #007700\">echo&nbsp;<\/span><span style=\"color: #DD0000\">'CROPPED&nbsp;IMAGE:&lt;br\/&gt;&lt;img&nbsp;src=\"'<\/span><span style=\"color: #007700\">.<\/span><span style=\"color: #0000BB\">$thumbImageLoc<\/span><span style=\"color: #007700\">.<\/span><span style=\"color: #DD0000\">'\"\/&gt;'<\/span><span style=\"color: #007700\">;<br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}else{<br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$error&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;<\/span><span style=\"color: #DD0000\">\"Sorry,&nbsp;there&nbsp;was&nbsp;an&nbsp;error&nbsp;uploading&nbsp;your&nbsp;file.\"<\/span><span style=\"color: #007700\">;<br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}<br \/>&nbsp;&nbsp;&nbsp;&nbsp;}<br \/>}<br \/><br \/><\/span><span style=\"color: #FF8000\">\/\/&nbsp;Display&nbsp;error<br \/><\/span><span style=\"color: #007700\">echo&nbsp;<\/span><span style=\"color: #0000BB\">$error<\/span><span style=\"color: #007700\">;<br \/><\/span><span style=\"color: #0000BB\">?&gt;<\/span><\/pre>\n<p class=\"seeAlso\"><span><\/span><a href=\"https:\/\/www.codexworld.com\/live-image-upload-jquery-php-mysql\/\">Upload Image without Page Refresh using jQuery and PHP<\/a><\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Cropping image before upload, always a great idea for server space optimization. Crop feature helps to resize the image as per the required size before uploading on the server. You can reduce the web page <\/p>\n","protected":false},"author":1,"featured_media":2897,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[6,4],"tags":[16,213,14,67],"class_list":["post-2888","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-jquery","category-php","tag-jquery","tag-jquery-plugin","tag-php","tag-upload","cat-6-id","cat-4-id","has_thumb"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.4 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Live Image Upload, Crop and Resize using jQuery and PHP - CodexWorld<\/title>\n<meta name=\"description\" content=\"Image upload and cropping using jQuery and PHP - Live image upload and resize with PHP and jQuery. Use imgAreaSelect plugin to crop and resize image using jQuery and upload to the server using PHP.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.codexworld.com\/live-image-upload-crop-resize-using-jquery-php\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Live Image Upload, Crop and Resize using jQuery and PHP - CodexWorld\" \/>\n<meta property=\"og:description\" content=\"Image upload and cropping using jQuery and PHP - Live image upload and resize with PHP and jQuery. Use imgAreaSelect plugin to crop and resize image using jQuery and upload to the server using PHP.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.codexworld.com\/live-image-upload-crop-resize-using-jquery-php\/\" \/>\n<meta property=\"og:site_name\" content=\"CodexWorld\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/codexworld\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/codexworld\" \/>\n<meta property=\"article:published_time\" content=\"2017-10-26T18:50:10+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2018-12-06T21:05:34+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.codexworld.com\/wp-content\/uploads\/2017\/10\/live-image-upload-crop-resize-using-jquery-php-codexworld.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1366\" \/>\n\t<meta property=\"og:image:height\" content=\"768\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"CodexWorld\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@codexworldblog\" \/>\n<meta name=\"twitter:site\" content=\"@codexworldweb\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"CodexWorld\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"11 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/live-image-upload-crop-resize-using-jquery-php\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/live-image-upload-crop-resize-using-jquery-php\\\/\"},\"author\":{\"name\":\"CodexWorld\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#\\\/schema\\\/person\\\/9da51d8fa3cdefeb5ec9c69136d4baf0\"},\"headline\":\"Live Image Upload, Crop and Resize using jQuery and PHP\",\"datePublished\":\"2017-10-26T18:50:10+00:00\",\"dateModified\":\"2018-12-06T21:05:34+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/live-image-upload-crop-resize-using-jquery-php\\\/\"},\"wordCount\":470,\"commentCount\":1,\"publisher\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/live-image-upload-crop-resize-using-jquery-php\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2017\\\/10\\\/live-image-upload-crop-resize-using-jquery-php-codexworld.png\",\"keywords\":[\"jQuery\",\"jQuery Plugin\",\"PHP\",\"Upload\"],\"articleSection\":[\"jQuery\",\"PHP\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.codexworld.com\\\/live-image-upload-crop-resize-using-jquery-php\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/live-image-upload-crop-resize-using-jquery-php\\\/\",\"url\":\"https:\\\/\\\/www.codexworld.com\\\/live-image-upload-crop-resize-using-jquery-php\\\/\",\"name\":\"Live Image Upload, Crop and Resize using jQuery and PHP - CodexWorld\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/live-image-upload-crop-resize-using-jquery-php\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/live-image-upload-crop-resize-using-jquery-php\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2017\\\/10\\\/live-image-upload-crop-resize-using-jquery-php-codexworld.png\",\"datePublished\":\"2017-10-26T18:50:10+00:00\",\"dateModified\":\"2018-12-06T21:05:34+00:00\",\"description\":\"Image upload and cropping using jQuery and PHP - Live image upload and resize with PHP and jQuery. Use imgAreaSelect plugin to crop and resize image using jQuery and upload to the server using PHP.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/live-image-upload-crop-resize-using-jquery-php\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.codexworld.com\\\/live-image-upload-crop-resize-using-jquery-php\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/live-image-upload-crop-resize-using-jquery-php\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2017\\\/10\\\/live-image-upload-crop-resize-using-jquery-php-codexworld.png\",\"contentUrl\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2017\\\/10\\\/live-image-upload-crop-resize-using-jquery-php-codexworld.png\",\"width\":1366,\"height\":768,\"caption\":\"live-image-upload-crop-resize-using-jquery-php-codexworld\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/live-image-upload-crop-resize-using-jquery-php\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.codexworld.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Live Image Upload, Crop and Resize using jQuery and PHP\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#website\",\"url\":\"https:\\\/\\\/www.codexworld.com\\\/\",\"name\":\"CodexWorld\",\"description\":\"Web &amp; Mobile App Development Company\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.codexworld.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#organization\",\"name\":\"CodexWorld\",\"url\":\"https:\\\/\\\/www.codexworld.com\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2014\\\/09\\\/codexworld-logo.png\",\"contentUrl\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2014\\\/09\\\/codexworld-logo.png\",\"width\":200,\"height\":19,\"caption\":\"CodexWorld\"},\"image\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/codexworld\",\"https:\\\/\\\/x.com\\\/codexworldweb\",\"https:\\\/\\\/www.linkedin.com\\\/company\\\/codexworld\",\"https:\\\/\\\/www.youtube.com\\\/codexworld\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#\\\/schema\\\/person\\\/9da51d8fa3cdefeb5ec9c69136d4baf0\",\"name\":\"CodexWorld\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g\",\"caption\":\"CodexWorld\"},\"description\":\"CodexWorld is a programming blog, one-stop destination for web professionals \u2014 developers, programmers, freelancers, and site owners.\",\"sameAs\":[\"http:\\\/\\\/www.codexworld.com\",\"https:\\\/\\\/www.facebook.com\\\/codexworld\",\"https:\\\/\\\/x.com\\\/codexworldblog\"],\"url\":\"https:\\\/\\\/www.codexworld.com\\\/author\\\/nitya192265\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Live Image Upload, Crop and Resize using jQuery and PHP - CodexWorld","description":"Image upload and cropping using jQuery and PHP - Live image upload and resize with PHP and jQuery. Use imgAreaSelect plugin to crop and resize image using jQuery and upload to the server using PHP.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.codexworld.com\/live-image-upload-crop-resize-using-jquery-php\/","og_locale":"en_US","og_type":"article","og_title":"Live Image Upload, Crop and Resize using jQuery and PHP - CodexWorld","og_description":"Image upload and cropping using jQuery and PHP - Live image upload and resize with PHP and jQuery. Use imgAreaSelect plugin to crop and resize image using jQuery and upload to the server using PHP.","og_url":"https:\/\/www.codexworld.com\/live-image-upload-crop-resize-using-jquery-php\/","og_site_name":"CodexWorld","article_publisher":"https:\/\/www.facebook.com\/codexworld","article_author":"https:\/\/www.facebook.com\/codexworld","article_published_time":"2017-10-26T18:50:10+00:00","article_modified_time":"2018-12-06T21:05:34+00:00","og_image":[{"width":1366,"height":768,"url":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2017\/10\/live-image-upload-crop-resize-using-jquery-php-codexworld.png","type":"image\/png"}],"author":"CodexWorld","twitter_card":"summary_large_image","twitter_creator":"@codexworldblog","twitter_site":"@codexworldweb","twitter_misc":{"Written by":"CodexWorld","Est. reading time":"11 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.codexworld.com\/live-image-upload-crop-resize-using-jquery-php\/#article","isPartOf":{"@id":"https:\/\/www.codexworld.com\/live-image-upload-crop-resize-using-jquery-php\/"},"author":{"name":"CodexWorld","@id":"https:\/\/www.codexworld.com\/#\/schema\/person\/9da51d8fa3cdefeb5ec9c69136d4baf0"},"headline":"Live Image Upload, Crop and Resize using jQuery and PHP","datePublished":"2017-10-26T18:50:10+00:00","dateModified":"2018-12-06T21:05:34+00:00","mainEntityOfPage":{"@id":"https:\/\/www.codexworld.com\/live-image-upload-crop-resize-using-jquery-php\/"},"wordCount":470,"commentCount":1,"publisher":{"@id":"https:\/\/www.codexworld.com\/#organization"},"image":{"@id":"https:\/\/www.codexworld.com\/live-image-upload-crop-resize-using-jquery-php\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2017\/10\/live-image-upload-crop-resize-using-jquery-php-codexworld.png","keywords":["jQuery","jQuery Plugin","PHP","Upload"],"articleSection":["jQuery","PHP"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.codexworld.com\/live-image-upload-crop-resize-using-jquery-php\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.codexworld.com\/live-image-upload-crop-resize-using-jquery-php\/","url":"https:\/\/www.codexworld.com\/live-image-upload-crop-resize-using-jquery-php\/","name":"Live Image Upload, Crop and Resize using jQuery and PHP - CodexWorld","isPartOf":{"@id":"https:\/\/www.codexworld.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.codexworld.com\/live-image-upload-crop-resize-using-jquery-php\/#primaryimage"},"image":{"@id":"https:\/\/www.codexworld.com\/live-image-upload-crop-resize-using-jquery-php\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2017\/10\/live-image-upload-crop-resize-using-jquery-php-codexworld.png","datePublished":"2017-10-26T18:50:10+00:00","dateModified":"2018-12-06T21:05:34+00:00","description":"Image upload and cropping using jQuery and PHP - Live image upload and resize with PHP and jQuery. Use imgAreaSelect plugin to crop and resize image using jQuery and upload to the server using PHP.","breadcrumb":{"@id":"https:\/\/www.codexworld.com\/live-image-upload-crop-resize-using-jquery-php\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.codexworld.com\/live-image-upload-crop-resize-using-jquery-php\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codexworld.com\/live-image-upload-crop-resize-using-jquery-php\/#primaryimage","url":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2017\/10\/live-image-upload-crop-resize-using-jquery-php-codexworld.png","contentUrl":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2017\/10\/live-image-upload-crop-resize-using-jquery-php-codexworld.png","width":1366,"height":768,"caption":"live-image-upload-crop-resize-using-jquery-php-codexworld"},{"@type":"BreadcrumbList","@id":"https:\/\/www.codexworld.com\/live-image-upload-crop-resize-using-jquery-php\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.codexworld.com\/"},{"@type":"ListItem","position":2,"name":"Live Image Upload, Crop and Resize using jQuery and PHP"}]},{"@type":"WebSite","@id":"https:\/\/www.codexworld.com\/#website","url":"https:\/\/www.codexworld.com\/","name":"CodexWorld","description":"Web &amp; Mobile App Development Company","publisher":{"@id":"https:\/\/www.codexworld.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.codexworld.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.codexworld.com\/#organization","name":"CodexWorld","url":"https:\/\/www.codexworld.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codexworld.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2014\/09\/codexworld-logo.png","contentUrl":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2014\/09\/codexworld-logo.png","width":200,"height":19,"caption":"CodexWorld"},"image":{"@id":"https:\/\/www.codexworld.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/codexworld","https:\/\/x.com\/codexworldweb","https:\/\/www.linkedin.com\/company\/codexworld","https:\/\/www.youtube.com\/codexworld"]},{"@type":"Person","@id":"https:\/\/www.codexworld.com\/#\/schema\/person\/9da51d8fa3cdefeb5ec9c69136d4baf0","name":"CodexWorld","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g","caption":"CodexWorld"},"description":"CodexWorld is a programming blog, one-stop destination for web professionals \u2014 developers, programmers, freelancers, and site owners.","sameAs":["http:\/\/www.codexworld.com","https:\/\/www.facebook.com\/codexworld","https:\/\/x.com\/codexworldblog"],"url":"https:\/\/www.codexworld.com\/author\/nitya192265\/"}]}},"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2017\/10\/live-image-upload-crop-resize-using-jquery-php-codexworld.png","jetpack_shortlink":"https:\/\/wp.me\/p6bxIh-KA","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/posts\/2888","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/comments?post=2888"}],"version-history":[{"count":9,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/posts\/2888\/revisions"}],"predecessor-version":[{"id":3658,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/posts\/2888\/revisions\/3658"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/media\/2897"}],"wp:attachment":[{"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/media?parent=2888"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/categories?post=2888"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/tags?post=2888"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}