ailon / cropro Goto Github PK
View Code? Open in Web Editor NEWCrop, rotate, flip, and straighten images in your web apps.
License: Other
Crop, rotate, flip, and straighten images in your web apps.
License: Other
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
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.
Could you please fix that? I really enjoy using CROPRO, but the bug is the only obstacle to a perfectly-working library.
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.
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!
Hi, there is an issue where if you crop an image small enough, some buttons on the toolbar disappear.
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.
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:
Here's what it looks like when the height isn't properly updated (note half the screen is not covered by the cropping tool):
Hey there is no way to change z-index property of the popup
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
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.
useful for grabbing the dataurl imperatively without doing startRenderAndClose and addRenderEventListener, so i can do something like
const dataurl = await cropArea.render();
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
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.
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!
See: https://codesandbox.io/s/gallant-rain-1ilj8z?file=/src/App.tsx
getState()
output below: x and y are 20!getState()
output below: x and y exceed the width/height of the image by 10Hi. 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().
Line 932 in 656367a
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
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 ๐
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
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..
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.