Questions tagged [jcrop]

Jcrop is the quick and easy way to add image cropping functionality to your web application. It combines the ease-of-use of a typical jQuery plugin with a powerful cross-platform DHTML cropping engine that is faithful to familiar desktop graphics applications.

Jcrop is the quick and easy way to add image cropping functionality to your web application. It combines the ease-of-use of a typical jQuery plugin with a powerful cross-platform DHTML cropping engine that is faithful to familiar desktop graphics applications.

Resources

Feature Overview

  • Attaches unobtrusively to any image
  • Supports aspect ratio locking
  • Supports minSize/maxSize setting
  • Callbacks for selection done, or while moving
  • Keyboard support for nudging selection
  • API features to create interactivity, including animation
  • Support for CSS styling
  • New: Experimental touch support (iOS, Android, etc)

Cross-platform Compatibility

  • Firefox 2+
  • Safari 3+
  • Opera 9.5+
  • Google Chrome 0.2+
  • Internet Explorer 6+

Documentation Archive

Jcrop is free software released under MIT License.

547 questions
30
votes
7 answers

JQuery JCrop - How to set a fixed size selection area?

I'm trying to figure out how to fix the selection box size under JCrop. The documentation mentions how to set an initial selection area but not how to make it fixed size. Does anybody knows how could I make it fixed. Thanks in…
user43092
  • 363
  • 1
  • 3
  • 7
19
votes
3 answers

How do I remove jcrop?

how do i un-jcrop an image? I'm adding jcrop with a; $('#imgThumbnailer').Jcrop({ onChange: statusCrop, onSelect: statusCrop, bgColor: 'black', bgOpacity: .3 }); How do I go about undoing it? Edit: $('#imgThumbnailer').attr("src",…
Justin808
  • 20,859
  • 46
  • 160
  • 265
16
votes
6 answers

jCrop (jQuery) sometimes fails to load image/cropper area

I've got a pretty simple problem, but I've become clueless on what is causing the problem. In one of my applications I'm using jCrop as a small add-on to crop images to fit in banners/headers etc. These steps will be taken: 1) Select an image (using…
Joshua - Pendo
  • 4,331
  • 6
  • 37
  • 51
16
votes
5 answers

Using jcrop on responsive images

Since jcrop is now working on touch screens I want to do a web app that uses it. I have everything working on it but if I try to make the design responsive so that the user can see the whole image before cropping (it's width is a percentage of the…
Elaine Marley
  • 2,143
  • 6
  • 50
  • 86
14
votes
4 answers

Is there a way to use JCrop to crop an area larger than the actual image?

From what I can tell, JCrop will not let me set things up so the user can crop outside the actual image and include surrounding whitespace. Is there a way to do that? To help explain what I mean, say we are restricting our crop to a 16:9 ratio. …
jwl
  • 10,268
  • 14
  • 53
  • 91
13
votes
2 answers

How should I crop an image at client side using jcrop and upload it?

I am working on a component in which there is file-upload HTML control, upon selecting an image using the file-upload element, the image would be rendered on the HTML5 Canvas element. Here is JSFiddle with sample code: …
Govinda Sakhare
  • 5,009
  • 6
  • 33
  • 74
13
votes
1 answer

How to get variable width & height when cropping with Jcrop and save with PHP GD

I have an application that has to crop images with variable width & height. but i don't know how to do this with the php gd (Createimagefromjpeg) function in my code i have: $targ_w = 400; $targ_h = 400; This means that the cropped image will…
Kees Sonnema
  • 5,759
  • 6
  • 51
  • 106
12
votes
2 answers

Resize Element with box handles in corners

in Jcrop , after selecting cropping area , a div appears with box handles in corners. Is there any jQuery plugin that can build this type of box handles ?
Mironline
  • 2,755
  • 7
  • 35
  • 61
10
votes
1 answer

Subsequent HTML5 CreateObjectURL blob image preview and cropping loading bug

I'm trying to figure out if my code is at fault or the current HTML5 File API implementation. The code below works. The bug appears when repeating the process after already loading the image once. The second time a file is selected the image blob…
Shelakel
  • 1,070
  • 9
  • 16
10
votes
1 answer

jcrop setSelect problem

I am having a small issue with setSelect and I cannot figure it out. I have a code that looks like this: jQuery('#cropbox1').Jcrop({ setSelect: [ 157,86,37,49 ], aspectRatio: 151 / 200, onChange: showCoords1, onSelect: …
luqita
  • 4,008
  • 13
  • 60
  • 93
9
votes
1 answer

Jcrop in Bootstrap Modal crops wrong coordinates

I'm using the code from this tutorial from my Jcrop script: http://blogaddition.com/2012/12/crop-an-image-and-upload-using-jquery-html5-and-php/ It works well as long as I don't put the image into Bootstrap modal. After that the image gets cropped…
user1049961
  • 2,656
  • 9
  • 37
  • 69
9
votes
3 answers

Image crop with AngularJS

I want to let the user crop an image, I found this JQuery plugin - http://deepliquid.com/content/Jcrop.html I tried to use it with Angular-ui's Jquery passthrough option, adding the ui-jq=Jcrop directive to the The problem is that If I use…
Gal Ben-Haim
  • 17,433
  • 22
  • 78
  • 131
8
votes
4 answers

JCrop: Prevent de-selection?

I'm currently setting up an image-upload cropping sequence. The application requires an enforced minimum size, however this results in awkward JCrop behavior: Clicking without dragging produces nothing. Clicking & slightly dragging produces…
Daniel B.
  • 1,650
  • 1
  • 19
  • 40
8
votes
4 answers

Using jCrop With Responsive Design/Fluid Width CSS

I'm having trouble using Jcrop on responsive width images for the mobile version of a site. When I apply a width setting of 100% to the uploaded image - to allow a user on a mobile device the best option of providing a successful crop, the outputted…
user2246804
  • 199
  • 1
  • 2
  • 11
8
votes
5 answers

Make Jcrop tracker not rotate when cropping a rotated image

I'm trying to crop an image using Jcrop, but when I use jqueryrotate on the image, something weird happens. I rotate the image 90 degress then I activate the JCrop, the JCrop does not follow the image rotated, so I also rotate the Jcrop-holder. The…
marchemike
  • 3,179
  • 13
  • 53
  • 96
1
2 3
36 37