Question

I’m looking to have users upload an image and then it will be cropped to a set size. What I’d like to have happen is essentially a div that’s set to the specific crop size and the image inside that box. The user would then be able to slide the image around and whatever was visible in that div is what the image would be cropped to.

All of the jquery plugins I’ve come across simply let the user move a selection box around the full image and not move the image behind the selection box. Does this sort of thing exist and have I just missed that plugin?

Basically it would be like the thumbnail editor in Facebook where you drag your image around in the thumbnail-sized box.

Answer 1

You don’t really need a plugin for that. This can be done by vanilla jQuery and CSS by setting the background-position value.

<div id="CroppedImageDiv"></div>
<script type="text/javascript">
    function cropImage(imgUrl, cropWidth, cropHeight, cropStartX, cropStartY) {
        var bgPos = cropStartX + "px " + cropStartY + "px";
        $('#CroppedImageDiv').width(cropWidth).height(cropheight).css('background-position', bgPos);
        $('#CroppedImageDiv').css('background-url', imgUrl);
    }
</script>