Image cropping with jquery

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 an

Answer 1

I would recomend "Guillotine": http://github.com/matiasgagliano/guillotine

It's a jQuery plugin that does just what you are asking, it also throws in rotation and zoom.

It supports touch devices and it's responsive.

Check out the demo: http://matiasgagliano.github.io/guillotine

Answer 2

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>

Answer 3

You can use the JCrop plugin.

Jcrop Plugin