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 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.

[Cropper.js](https://github.com/fengyuanchen/cropperjs) has a [viewing mode](https://github.com/fengyuanchen/cropperjs/blob/master/README.md#viewmode) in which the crop box cannot exceed the size of the canvas. You can set a crop size and then drag the image around the canvas behind the crop box. See the [demo](https://fengyuanchen.github.io/cropperjs/) and try viewing mode #1 (VM1). — showdev, Feb 01 '21 at 23:53
Also see [Croppie](https://foliotek.github.io/Croppie/#demos). — showdev, Feb 03 '21 at 02:09

score 0 · Accepted Answer · answered Apr 22 '12 at 02:45

0

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>

answered Apr 22 '12 at 02:45

Thach Mai

915
1
6
16

this won't give me the ability to drag the image aroung, though, right? this is just to determine the final image crop? sorry, i'm a javascript/jquery beginner. – nbu Apr 23 '12 at 00:51
Yes, this code just displays your final cropped image in a DIV. For the actual cropping action, you could take a look at the JCrop code for inspiration, but it could be challenging for a jQuery beginner... – Thach Mai Apr 23 '12 at 09:26

score 0 · Answer 2 · answered May 08 '14 at 00:41

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

score -1 · Answer 3 · edited Jun 20 '20 at 09:12

-1

You can use the JCrop plugin.

Jcrop Plugin

edited Jun 20 '20 at 09:12

Community

1
1

answered Apr 22 '12 at 03:40

Nudier Mena

3,254
2
22
22

thanks, but the jcrop plugin doesn't allow you to move the image around within a containing selection box. – nbu Apr 23 '12 at 00:49

Image cropping with jquery

3 Answers3

Linked