This bug is specific only for iOS phones, and only when using Safari's "Add to Home Screen" feature. Note that the website needs to a web app manifest file to support the "Add to Home Screen" feature.

When using the cropping tool in portrait mode on your iOS phone, when you switch to landscape view, the height of the cropping tool is updated, but when you switch the phone back to portrait view, the height is not updated back.

Steps to reproduce:

• Open your website in Safari on an iOS phone.
• Use the "Add to Home Screen" feature in Safari
• Open your web app from the Home Screen
• Open the cropping tool on your website with your phone in portrait view.
• Rotate your phone to switch to landscape view. The height of the cropping tool will be updated.
• Rotate your phone back to portrait view. The height of the cropping tool will NOT be updated.

Here's what it looks like when the height isn't properly updated (note half the screen is not covered by the cropping tool):

@ailon

1. When we rotate an image , the crop Area is not adjusting to the rotated image size , therefore it allowing to crop beyond the image as below
   

2. Once the image is rotated, it takes the dimensions of the previous image only, it's not taking full width, Therefore it becomes difficult to resize the crop rectangle on rotated image in mobile screen as below
   
   

Here's the link to reproduce the above mentioned issues
https://codesandbox.io/p/sandbox/cropro-all-defaults-demo-forked-2lkll7

Can you suggest what needs to be done to to resolve above issues..

I get the following errors when trying to use the library with the import <script src="https://unpkg.com/cropro/cropro.js"></script>, version 1.2.0

Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported. on Chrome at line CropArea.ts:557

and SecurityError: The operation is insecure. in Safari.

The equivalent markerjs2 code works fine.

getting blank image when image is rotate and cropped in iOS and sometimes it get stuck in editor with loading indicator keep processing in loop, once we rotate and crop the image.

Hi,

I would like to add my own language to the title- and aria-label-attributes.
The top and the bottom toolbar are missing the aria-label-attributes completly and in Marker.js you added also data-action-attributes where I can explicitly get the button which I want.

Currently:

<div title="Aspect ratio" class="__cropro__0_toolbar_button cropro__toolbar__button"></div>

Could be:

<div aria-label="Aspect ratio" title="Aspect ratio" data-action="ratio" class="__cropro__0_toolbar_button cropro__toolbar__button"></div>

Could you please add this too for Cropro? That would be very nice!

Thank you.

Hi,
we are testing to introduce cropro in our product because we are already convinced by markerjs2. Unfortunately the editor opens very slowly, it takes 2-4 seconds to open an image of 2-4MB. It also feels almost like an infinity loop.

Do you have any idea what this could be due to? I am using the normal code from the demo.

You can check it out here: https://codesandbox.io/s/cropro-all-defaults-demo-forked-tcr5mn?file=/index.html

Many greetings
Benny

Hi good morning from Argentina!

I would be needing to add the brightness and contrast functionalities to the cropper, I would like to know if there is the possibility of adding it or show me the way to add it myself. Greetings

useful for grabbing the dataurl imperatively without doing startRenderAndClose and addRenderEventListener, so i can do something like

const dataurl = await cropArea.render();

There's no way to rotate an image and retain its resolution. So if you have an image that's 1000 x 500 and go from landscape to portrait, the height of the image will be 500. If you then eliminate the white space on the sides, it's now 250 x 500.

Hi. Looks like I found a little bug. When I click the close button close event listeners weren't fired. Perhaps you need to call method close() rather than closeUI().

x and y of cropRect start at 20, 20, even though they're rendered at 0, 0. They can even exceed the dimensions of the image!

Steps to repro

See: https://codesandbox.io/s/gallant-rain-1ilj8z?file=/src/App.tsx

1. Click image to start cropping
2. Hit check immediately to save/render, with no changes to the crop rect
3. Observe the getState() output below: x and y are 20!

1. Click image to start cropping
2. Move the top left corner all the way to the bottom right as far as you can
3. Observe the getState() output below: x and y exceed the width/height of the image by 10

Hi, there is an issue where if you crop an image small enough, some buttons on the toolbar disappear.

Hey 👋🏻

I'm currently testing the integration of CROPRO into our product. I noticed that in marker.js 2, there's a feature to manually set the UI offset using uiOffsetTop (details here), and we use this to correctly position the UI within our component. Unfortunately, I couldn't find a similar option in CROPRO.

It would be fantastic if CROPRO could incorporate a feature that allows users to manually set the offset for both "top" and "left" positioning, similar to what can be done in markerjs. This would provide more flexibility and control over the user interface's appearance and positioning, which can be especially valuable in certain use cases.

Thanks for considering this request 🙂

Hello @ailon,

I'm getting a strange error when the cropper is set to popup mode:

It seems to be coming from the popup resizing event. No errors in inline mode:

Have you seen it before? Any suggestions on how to avoid it? The screenshots were taken with version 1.0.3, but the same happened when downgrading to 1.0.2.

Thanks!

p.s. It doesn't seem to affect the functionality of the tool, but I'd rather avoid getting errors in the console!

When utilising the renderAtNaturalSize setting, the flip actions (vertical and horizontal) produce a corrupted image. Rotating the image does not produce the same results and is unaffected.

Here is a CodeSandbox (forked from the original in the documentation, with renderAtNaturalSize being the only change):

https://codesandbox.io/s/cropro-customize-ui-demo-forked-cx8jxu?file=/src/index.js:150-169

The hit area for detecting mousemove seems to be very sensitive (not to mention potential FPS drops), so the crop handles can easily become desynced from the mouse position

I know this is a limitation of building in the browser, where mousemove events stop as soon as the mouse exits the hit area, but I wonder if

1. we can make the hit area the entire browser window — currently it stops at the bounds of the CropArea, which means when you start cropping from the edge you can often "lose grip" of the handles
2. Long term, change the implementation to be "absolute", storing the start mouse position on mousedown, and just checking the delta of the current mouse position compared to the starting position on mousemove. I've found this to feel better UX wise (and better for lower framerates) than accumulating the delta per event.

There's a major bug present both when integrating the plugin with different external codes and on the official markerjs2 and cropro plugin pages and on the Codesandbox projects linked to them.

I've attached the video capture of the issue. When I try to crop the image and change the crop area's borders, the bottom border starts to shift to top. It's strange and is very annoying when you're almost done with your perfectly cropped image and then everything just shifts and messes up, and you have to repeat the process over and over again.

Video

Could you please fix that? I really enjoy using CROPRO, but the bug is the only obstacle to a perfectly-working library.

Hey there is no way to change z-index property of the popup