The issue can be seen here: http://www.chicengine.com/pinterest/

To recreate the error:

1. Scroll halfway down the page.
2. Click on an image.
3. Try to drag crop area.
4. You will see that you are "jumped" further down the page.

Hey, maintainer(s) of tapmodo/Jcrop!

We at VersionEye are working hard to keep up the quality of the bower's registry.

We just finished our initial analysis of the quality of the Bower.io registry:

7530 - registered packages, 224 of them doesnt exists anymore;

We analysed 7306 existing packages and 1070 of them don't have bower.json on the master branch ( that's where a Bower client pulls a data ).

Sadly, your library tapmodo/Jcrop is one of them.

Can you spare 15 minutes to help us to make Bower better?

Just add a new file bower.json and change attributes.

{
  "name": "tapmodo/Jcrop",
  "version": "1.0.0",
  "main": "path/to/main.css",
  "description": "please add it",
  "license": "Eclipse",
  "ignore": [
    ".jshintrc",
    "**/*.txt"
  ],
  "dependencies": {
    "<dependency_name>": "<semantic_version>",
    "<dependency_name>": "<Local_folder>",
    "<dependency_name>": "<package>"
  },
  "devDependencies": {
    "<test-framework-name>": "<version>"
  }
}

Read more about bower.json on the official spefication and nodejs semver library has great examples of proper versioning.

NB! Please validate your bower.json with jsonlint before commiting your updates.

Thank you!

Timo, twitter: @versioneye email: [email protected] VersionEye - no more legacy software!

I need to block users for clicking to the area, that is not in the crop. It sometimes confuses them, when they click to the black area and the crop disappears.

Fixes issues when combining Jcrop with responsive grids like e.g. Zurb Foundation.

Took a while to debug this, but Zurb Foundation's grid.css sets max-width to 100% for all images which completely breaks Jcrop (see screenshot below). Simply setting max-width to none for all images within the jcrop-holder fixes the issue.

i get these errors: in chrome Uncaught SyntaxError: Invalid regular expression: /(^|.)jcrop(.|$)/: Stack overflow in safari: jquery.js:1751 RangeError: Maximum call stack size exceeded.

i just updated to 0.9.12 jcrop and 1.9.1 jquery

does anyone know what could be wrong or what to check. thank you.

Is there any way to optimise for mobile? It works .. bad. I mean "slow" and "stucks touches all over the page". Well, the "stucks touches all over the page" i'll try to fix (not sure, but may be bootstrap bug), but "slow" is native.

When I use Jrop, a radio button is add on the left of my image I've dig a little and find out that it's because of KeyManager. In fact, it create a radio input which seem useful for moving the crop selection with the keyboard.

To hide it, I've change this:

        position: 'fixed',
        left: '-12000px',
        width: '12px'
      }),

by this :

        position: 'fixed',
        left: '-12000px',
        width: '12px'
      }),

Since I don't really understand why this input is here, I don't know if this fix is a good one.

Hope somebody will enlighten me about it and fix this properly.

Goal:

• make multiple selections on the same image
• 2nd selection doesn't cancel 1st selection (both are visible at the same time)

Additional:

• concatenate multiple selections in on square polygon

Or is it better to make multiple instances of jCrop? (but how are they then stacked, they are supposed to be on the same level, not one on top of the other)

Please support for a double-click/tap event handler on the cropped area (not the rest of the image) which could then be hooked into to execute the crop/etc.

When right-clicking on a JCrop-targeted image I don't see the usual "save image as" browser menu. There does not seem to be a way to make JCrop not mess with the right-click on image behavior (at least there is no such mention in the docs).

I use jCrop to resize website screenshot down to a desired size. I need end result of 740x656.

So I set aspect ratio to 740/656 - the user isn't allowed to make a selection smaller than that.

If the user sets jCrop selection to 940 width, jCrop calculates a height of 833. But in actuality, the correct dimension should be 940 x 833.297297297297...

So when I pass these coordinates to PHP, the resized image at 740x656 comes back very blurry. Because PHP creates image that is 740x656 from the 940x833 selection.

I have spent some 6 hours or so investigation this issue so far. I'm under the impression the issue is with jCrop allowing the user to make selection that should not be allowed. The aspect ratio isn't correct on the user's selection:

740/656 = 1.1280 48780 48780 48780 48780...

940/833 = 1.1284513805522208883553421368547

940*656/740 = 833.297 297 297 297 297 297 297...

Any ideas how I can solve this problem? I need the resulting image to be clear.

This isn't exactly a code issue in JCrop, but rather on its website. I've submitted the issue there due to a lack of a better place.
I'll get straight to the point:

See the last example on https://jcrop.com/guide/#reading-state "crop.move" isn't an event and causes the code to do nothing. Change it to "crop.change" in order to fix it.

The last commit was September 2018 and it looks like quite a few github issues here, and incomplete documentation. Just wondering what the future is for Jcrop.

Hi I am trying to fix my image cropping area like 500x500 or any desire, but it is not possible with trueSize or minSize or maxSize, I have huge large images like 1600x2000 which covers all the browser area so I need a resize method.

   `Jcrop.load('target').then(img => {
        jcp = Jcrop.attach(img, { multi: true });
        jcp.setOptions({
            minSize: [250, 250],
            maxSize: [250, 350]
        });
      
    });`

Currently the guide shows an example that calls newCropper() on a Jcrop instance. This does not actually work because, as far as I can tell, this method does not exist. Additionally, the header above already shows the working method, newWidget(). Hopefully this change will save someone else some time and prevent them from banging their head against a wall for no reason 😄.

In these examples:

https://jcrop.com/guide/widgets.html#creating-a-widget https://jcrop.com/guide/instance.html#newwidget-rect-options

const jcrop = Jcrop.attach('target');
const rect = Jcrop.Rect.fromPoints([100,100],[200,200]);
jcrop.newCropper(rect,{ aspectRatio: rect.aspect });

TypeError: jcrop.newCropper is not a function

I'm finding it really hard to get this working, and unfortunately the documentation is very confusing or incomplete. (eventually got this figured out)

Would be nice if the page at: https://jcrop.com/examples/ could have an example source code that I could copy from, as it seems to do exactly what I want.

I'm simply looking to put a default cropper active, centered to the image, with fixed aspect ratio.