SiteKickr Web Development

Pure JavaScript / CSS photo cropping tool

Phil LaNasa

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.

Key CSS Ingredients:

Key JavaScript Ingredients:

 

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.

 

Cropping Tool

The HTML

<div id="wrapper">
    <img src="myimage.jpg" alt="" id="image" />
    <span id="thumb"></span> <!-- the cropping boundaries -->
</div>

The CSS

#wrapper { position: relative; width: maxImageWidthpx; height: maxImageHeightpx; }
#image { position: absolute; top: 0; left: 0; max-width: maxImageWidthpx; max-height: maxImageHeightpx; }
#thumb { position: absolute; top: 0; left: 0; width: cropWidthpx; height: cropHeightpx; border: 2px dashed #aaa; cursor: move;  }   

The jQuery

var width = $('img').width();
var height = $('img').height();
$('img').resizable({
    aspectRatio : true,
    containment: 'parent',
    minWidth: cropWidth,
    minHeight: cropHeight,
    handles: 'se',
    stop : function(event, ui) {
        var width = $('img').width();
        var height = $('img').height();
        $('#thumb').draggable('option', 'containment', [0, 0, width - cropWidth, height - cropHeight]);
        $.ajax({
            url: 'updateTable.php?id=' + id + '&width=' + width + '&height=' + height
        })
    }   
});
$('#thumb').draggable({
    containment : [0, 0, width - cropWidth, height - cropHeight],
    stop : function(event, ui) {
        $.ajax({
            url: 'updateTable.php?id=' + id + '&x=' + ui.position.left + '&y=' + ui.position.top
        })
    }   
});

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.

Front End

The HTML

<span id="photo-wrapper">
  <img src="myimage.jpg"
           width="<?php echo $widthFromDB; ?>"
           height="<?php echo $heightFromDB;?>"
           style="margin: -<?php echo $yFromDB; ?>px 0 0 -<?php echo $xFromDB; ?>px;"
           alt="" />
</span>

The CSS

#photo-wrapper { display: block; width: cropWidthpx; height: cropHeightpx; overflow: hidden; }