{"id":16449,"date":"2020-07-21T12:28:36","date_gmt":"2020-07-21T12:28:36","guid":{"rendered":"https:\/\/www.devopsschool.com\/blog\/?p=16449"},"modified":"2021-10-30T06:07:43","modified_gmt":"2021-10-30T06:07:43","slug":"image-upload-and-crop-using-php-and-jquery","status":"publish","type":"post","link":"https:\/\/www.devopsschool.com\/blog\/image-upload-and-crop-using-php-and-jquery\/","title":{"rendered":"Image Upload and Crop using PHP and jQuery"},"content":{"rendered":"\n<p>In this <strong>PHP<\/strong> tutorial, I am going to tell you how to crop an image using <strong>jQuery <\/strong>and upload the image via <strong>Ajax<\/strong>. Using the <strong>Croppie plugin<\/strong> to crop the image.<\/p>\n\n\n\n<p>First, we create a <strong>HTML <\/strong>file &#8220;index.html&#8221; and include the required library.<\/p>\n\n\n\n<script src=\"https:\/\/gist.github.com\/narayanlog\/fe85d3d82d3ad9919464807e1ec3131b.js\"><\/script>\n\n\n\n<p>Now, we can create a <strong>PHP <\/strong>file &#8220;croppie.php&#8221; to move the cropped images into a folder and also create a &#8220;<strong>uploads<\/strong>&#8221; folder, put this code.<\/p>\n\n\n\n<script src=\"https:\/\/gist.github.com\/narayanlog\/c9a430639d27703e2becb1fc8dcf1055.js\"><\/script>\n\n\n\n<p>And RUN your index file in localhost.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"416\" src=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/07\/Cropping3-1024x416.png\" alt=\"\" class=\"wp-image-16451\" srcset=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/07\/Cropping3-1024x416.png 1024w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/07\/Cropping3-300x122.png 300w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/07\/Cropping3-768x312.png 768w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/07\/Cropping3.png 1130w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>After image upload and cropping.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"413\" src=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/07\/Cropping2-1024x413.png\" alt=\"\" class=\"wp-image-16452\" srcset=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/07\/Cropping2-1024x413.png 1024w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/07\/Cropping2-300x121.png 300w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/07\/Cropping2-768x310.png 768w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/07\/Cropping2.png 1121w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p><strong>Reference <a aria-label=\"undefined (opens in a new tab)\" href=\"http:\/\/www.expertphp.in\/article\/php-jquery-crop-and-resize-image-before-upload-using-croppie-plugin\" target=\"_blank\" rel=\"noreferrer noopener\">link<\/a>:<\/strong><\/p>\n\n\n<div class=\"epyt-gallery\" data-currpage=\"1\" id=\"epyt_gallery_46529\"><figure class=\"wp-block-embed wp-block-embed-youtube is-type-video is-provider-youtube epyt-figure\"><div class=\"wp-block-embed__wrapper\"><iframe loading=\"lazy\"  id=\"_ytid_82541\"  width=\"760\" height=\"427\"  data-origwidth=\"760\" data-origheight=\"427\" src=\"https:\/\/www.youtube.com\/embed\/?enablejsapi=1&#038;autoplay=0&#038;cc_load_policy=0&#038;cc_lang_pref=&#038;iv_load_policy=1&#038;loop=0&#038;rel=1&#038;fs=1&#038;playsinline=0&#038;autohide=2&#038;theme=dark&#038;color=red&#038;controls=1&#038;disablekb=0&#038;\" class=\"__youtube_prefs__  no-lazyload\" title=\"YouTube player\"  data-epytgalleryid=\"epyt_gallery_46529\"  allow=\"fullscreen; accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen data-no-lazy=\"1\" data-skipgform_ajax_framebjll=\"\"><\/iframe><\/div><\/figure><div class=\"epyt-gallery-list\"><div>Sorry, there was a YouTube error.<\/div><\/div><\/div>","protected":false},"excerpt":{"rendered":"<p>In this PHP tutorial, I am going to tell you how to crop an image using jQuery and upload the image via Ajax. Using the Croppie plugin to crop the image. First, we create a HTML file &#8220;index.html&#8221; and include the required library. Now, we can create a PHP file &#8220;croppie.php&#8221; to move the cropped&#8230;<\/p>\n","protected":false},"author":9,"featured_media":16454,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"_kad_post_classname":"","_joinchat":[],"footnotes":""},"categories":[5150],"tags":[5838,6273,4459,6035,177],"class_list":["post-16449","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-php","tag-ajax","tag-croppie-plugin","tag-html","tag-jquery","tag-php"],"_links":{"self":[{"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/posts\/16449","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/users\/9"}],"replies":[{"embeddable":true,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/comments?post=16449"}],"version-history":[{"count":3,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/posts\/16449\/revisions"}],"predecessor-version":[{"id":24654,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/posts\/16449\/revisions\/24654"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/media\/16454"}],"wp:attachment":[{"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/media?parent=16449"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/categories?post=16449"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/tags?post=16449"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}