{"id":338,"date":"2011-08-05T16:04:27","date_gmt":"2011-08-05T16:04:27","guid":{"rendered":"http:\/\/www.sitekickr.com\/blog\/?p=338"},"modified":"2011-08-05T16:05:11","modified_gmt":"2011-08-05T16:05:11","slug":"basic-draggable-photo-cropper","status":"publish","type":"post","link":"https:\/\/www.sitekickr.com\/blog\/basic-draggable-photo-cropper\/","title":{"rendered":"A basic draggable photo cropper"},"content":{"rendered":"<p>If you have user generated photos, and wish to crop them down to a thumbnail, it&#39;s not always easy to decide which area of the photo to crop. It generally makes sense to let the user make that decision.<\/p>\n<p>With jQuery and AJAX at our side, this task can be made relatively simple. See the example below.<\/p>\n<h3>The HTML<\/h3>\n<p><code>&lt;div id=&quot;photo-wrapper&quot;&gt;<br \/>\n\t&nbsp;&nbsp;&nbsp; &lt;img src=&quot;myphoto.jpg&quot; width=&quot;xxx&quot; height=&quot;xxx&quot; alt=&quot;&quot; \/&gt;<br \/>\n\t&lt;\/div&gt;<br \/>\n\t<\/code><\/p>\n<h3>The CSS<\/h3>\n<p><code>#photo-wrapper { position: relative; <br \/>\n\t&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; border: 1px solid #000; }<br \/>\n\t#photo-cropper { position: absolute; <br \/>\n\t&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; left: 0; <br \/>\n\t&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; top: 0; <br \/>\n\t&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; width: <em>xxx<\/em>px;&nbsp;&nbsp; \/\/ the width of the cropping region<br \/>\n\t&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; height: <em>xxx<\/em>px;&nbsp; \/\/ the height of the cropping region<br \/>\n\t&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; border: 1px dashed #eee; <br \/>\n\t&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; cursor: move; }<br \/>\n\t<\/code><\/p>\n<p>&nbsp;<\/p>\n<h3>The jQuery<\/h3>\n<p><code>$(&#39;#photo-wrapper&#39;).append(&#39;&lt;div id=&quot;photo-cropper&quot;&gt;&lt;\/div&gt;&#39;);<br \/>\n\t$(&#39;#photo-cropper&#39;).draggable({<br \/>\n\t&nbsp;&nbsp;&nbsp; containment : &#39;parent&#39;,<br \/>\n\t&nbsp;&nbsp;&nbsp; stop: function(event, ui) {<br \/>\n\t&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; $(&#39;#photo-cropper&#39;).draggable(&#39;disable&#39;);<br \/>\n\t&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; $.ajax({<br \/>\n\t&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; url : &#39;<em>yourProcessingScript.php<\/em>&amp;x=&#39; + ui.position.left + &#39;&amp;y=&#39; + ui.position.top,<br \/>\n\t&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; complete : function() {<br \/>\n\t&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; $(&#39;#photo-cropper&#39;).draggable(&#39;enable&#39;);<br \/>\n\t&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; }<br \/>\n\t&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; });<br \/>\n\t&nbsp;&nbsp;&nbsp; }<br \/>\n\t});<br \/>\n\t<\/code><\/p>\n<p>&nbsp;<\/p>\n<p>You may need to pass additional arguments to your processing script in the AJAX url. Your processing script would most likely store the cropping x and y positions in your database, then perform image manipulation on the original image.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>If you have user generated photos, and wish to crop them down to a thumbnail, it&#39;s not always easy to decide which area of the&hellip;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"amp_status":""},"categories":[5],"tags":[112,86],"_links":{"self":[{"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/posts\/338"}],"collection":[{"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/comments?post=338"}],"version-history":[{"count":0,"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/posts\/338\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/media?parent=338"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/categories?post=338"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/tags?post=338"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}