If you don't have image manipulation capabilities available on your server, fortunately, you can still implement a basic photo cropping tool using pure CSS & JavaScript.<\/p>\n
Key CSS Ingredients:<\/p>\n
Key JavaScript Ingredients:<\/p>\n
<\/p>\n
On the cropping tool side, you can leverage jQuery mobile's draggable and resizeable tools to create a very basic UI for cropping a photo.<\/p>\n
<\/p>\n
\t<\/code><\/p>\n Note the php scripts used within the jQuery AJAX calls. These simply contain the code which will update your database table with the new width, height, x, y positions of the cropping region and image size. One the front end, we make use of the CSS properties mentioned above (negative margins and overflow) to effectively crop the full photo within a wrapper.<\/p>\n \t<\/code><\/p>\n","protected":false},"excerpt":{"rendered":" If you don't have image manipulation capabilities available on your server, fortunately, you can still implement a basic photo cropping tool using pure CSS &…<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"amp_status":""},"categories":[12,14,5],"tags":[112],"_links":{"self":[{"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/posts\/356"}],"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=356"}],"version-history":[{"count":0,"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/posts\/356\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/media?parent=356"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/categories?post=356"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/tags?post=356"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}<div id="wrapper">
\n\t <img src="myimage.jpg" alt="" id="image" \/>
\n\t <span id="thumb"><\/span> <!-- the cropping boundaries -->
\n\t<\/div><\/code><\/p>\nThe CSS<\/h3>\n
#wrapper { position: relative; width: maxImageWidth<\/strong><\/em>px; height: maxImageHeight<\/strong><\/em>px; }
\n\t#image { position: absolute; top: 0; left: 0; max-width: maxImageWidth<\/em><\/strong>px; max-height: maxImageHeight<\/strong><\/em>px; }
\n\t#thumb { position: absolute; top: 0; left: 0; width: cropWidth<\/em><\/strong>px; height: cropHeight<\/strong><\/em>px; border: 2px dashed #aaa; cursor: move; } <\/p>\nThe jQuery<\/h3>\n
var width = $('img').width();
\n\tvar height = $('img').height();
\n\t$('img').resizable({
\n\t aspectRatio : true,
\n\t containment: 'parent',
\n\t minWidth: cropWidth<\/strong><\/em>,
\n\t minHeight: cropHeight<\/strong><\/em>,
\n\t handles: 'se',
\n\t stop : function(event, ui) {
\n\t var width = $('img').width();
\n\t var height = $('img').height();
\n\t $('#thumb').draggable('option', 'containment', [0, 0, width - cropWidth<\/strong><\/em>, height - cropHeight<\/strong><\/em>]);
\n\t $.ajax({
\n\t url: 'updateTable.php?id=' + id + '&width=' + width + '&height=' + height
\n\t })
\n\t }
\n\t});
\n\t$('#thumb').draggable({
\n\t containment : [0, 0, width - cropWidth<\/em><\/strong>, height - cropHeight<\/strong><\/em>],
\n\t stop : function(event, ui) {
\n\t $.ajax({
\n\t url: 'updateTable.php?id=' + id + '&x=' + ui.position.left + '&y=' + ui.position.top
\n\t })
\n\t }
\n\t});<\/code><\/p>\n
\n\t <\/p>\nFront End<\/h2>\n
The HTML<\/h3>\n
<span id="photo-wrapper">
\n\t <img src="myimage.jpg"
\n\t width="<?php echo $widthFromDB; ?>"
\n\t height="<?php echo $heightFromDB;?>"
\n\t style="margin: -<?php echo $yFromDB; ?>px 0 0 -<?php echo $xFromDB; ?>px;"
\n\t alt="" \/>
\n\t<\/span>
\n\t<\/code><\/p>\nThe CSS<\/h3>\n
#photo-wrapper { display: block; width: cropWidth<\/strong><\/em>px; height: cropHeight<\/strong><\/em>px; overflow: hidden; }<\/p>\n