Image cropping with jquery

问题

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.

回答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>

回答2:

You can use the JCrop plugin.

Jcrop Plugin

回答3:

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

来源：https://stackoverflow.com/questions/10264705/image-cropping-with-jquery