react-component / cropping Goto Github PK

View Code? Open in Web Editor NEW

55.0 55.0 13.0 4.75 MB

image cropping

Home Page: https://react-component.github.io/cropping/

License: MIT License

CSS 14.25% JavaScript 3.71% TypeScript 82.05%

cropping's People

Contributors

Stargazers

Watchers

Forkers

szwork2013 het1001 giancjs originalsin aslakrin kunato arthuraraujo evervasquez codesignist ahanusek daddou-ma omerpucit

cropping's Issues

x button

x button doesn't work on google chrome, how can I fix it?

Feature Request: Crop 2 images(background-image and image) into a single output image.

Is it possible to provide the source image in a existing background image to crop them into single image using this package.
following is the example working urls for making this feature.

http://subinsb.com/create-profile-picture-framer-web-app/

Git url: https://github.com/subins2000/profile-picture-framer

can this feature implemented in your package ?

Raw example is broken

there are errors after file is selected in raw example

Error: warning.js:33 Warning: React.createElement: type is invalid -- expected a string...

warning.js:33 Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in.

Check the render method of `Test`.
    in Test
printWarning @ warning.js:33
warning @ warning.js:57
createElement @ react.development.js:1275
render @ raw.js:55
finishClassComponent @ react-dom.development.js:10249
updateClassComponent @ react-dom.development.js:10226
beginWork @ react-dom.development.js:10605
performUnitOfWork @ react-dom.development.js:12573
workLoop @ react-dom.development.js:12682
callCallback @ react-dom.development.js:1299
invokeGuardedCallbackDev @ react-dom.development.js:1338
invokeGuardedCallback @ react-dom.development.js:1195
performWork @ react-dom.development.js:12800
batchedUpdates @ react-dom.development.js:13244
performFiberBatchedUpdates @ react-dom.development.js:1646
stackBatchedUpdates @ react-dom.development.js:1637
batchedUpdates @ react-dom.development.js:1651
batchedUpdatesWithControlledComponents @ react-dom.development.js:1664
dispatchEvent @ react-dom.development.js:1874
invariant.js:42 Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in.

Check the render method of `Test`.
    at invariant (invariant.js:42)
    at createFiberFromElementType (react-dom.development.js:8185)
    at createFiberFromElement (react-dom.development.js:8130)
    at reconcileSingleElement (react-dom.development.js:9378)
    at reconcileChildFibers (react-dom.development.js:9477)
    at reconcileChildrenAtPriority (react-dom.development.js:10135)
    at reconcileChildren (react-dom.development.js:10118)
    at finishClassComponent (react-dom.development.js:10254)
    at updateClassComponent (react-dom.development.js:10226)
    at beginWork (react-dom.development.js:10605)
invariant @ invariant.js:42
createFiberFromElementType @ react-dom.development.js:8185
createFiberFromElement @ react-dom.development.js:8130
reconcileSingleElement @ react-dom.development.js:9378
reconcileChildFibers @ react-dom.development.js:9477
reconcileChildrenAtPriority @ react-dom.development.js:10135
reconcileChildren @ react-dom.development.js:10118
finishClassComponent @ react-dom.development.js:10254
updateClassComponent @ react-dom.development.js:10226
beginWork @ react-dom.development.js:10605
performUnitOfWork @ react-dom.development.js:12573
workLoop @ react-dom.development.js:12682
callCallback @ react-dom.development.js:1299
invokeGuardedCallbackDev @ react-dom.development.js:1338
invokeGuardedCallback @ react-dom.development.js:1195
performWork @ react-dom.development.js:12800
batchedUpdates @ react-dom.development.js:13244
performFiberBatchedUpdates @ react-dom.development.js:1646
stackBatchedUpdates @ react-dom.development.js:1637
batchedUpdates @ react-dom.development.js:1651
batchedUpdatesWithControlledComponents @ react-dom.development.js:1664
dispatchEvent @ react-dom.development.js:1874
react-dom.development.js:8305 The above error occurred in the <Test> component:
    in Test

Consider adding an error boundary to your tree to customize error handling behavior.
You can learn more about error boundaries at https://fb.me/react-error-boundaries.
logCapturedError$1 @ react-dom.development.js:8305
captureError @ react-dom.development.js:12993
performWork @ react-dom.development.js:12825
batchedUpdates @ react-dom.development.js:13244
performFiberBatchedUpdates @ react-dom.development.js:1646
stackBatchedUpdates @ react-dom.development.js:1637
batchedUpdates @ react-dom.development.js:1651
batchedUpdatesWithControlledComponents @ react-dom.development.js:1664
dispatchEvent @ react-dom.development.js:1874
invariant.js:42 Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in.

Check the render method of `Test`.
    at invariant (invariant.js:42)
    at createFiberFromElementType (react-dom.development.js:8185)
    at createFiberFromElement (react-dom.development.js:8130)
    at reconcileSingleElement (react-dom.development.js:9378)
    at reconcileChildFibers (react-dom.development.js:9477)
    at reconcileChildrenAtPriority (react-dom.development.js:10135)
    at reconcileChildren (react-dom.development.js:10118)
    at finishClassComponent (react-dom.development.js:10254)
    at updateClassComponent (react-dom.development.js:10226)
    at beginWork (react-dom.development.js:10605)
invariant @ invariant.js:42
createFiberFromElementType @ react-dom.development.js:8185
createFiberFromElement @ react-dom.development.js:8130
reconcileSingleElement @ react-dom.development.js:9378
reconcileChildFibers @ react-dom.development.js:9477
reconcileChildrenAtPriority @ react-dom.development.js:10135
reconcileChildren @ react-dom.development.js:10118
finishClassComponent @ react-dom.development.js:10254
updateClassComponent @ react-dom.development.js:10226
beginWork @ react-dom.development.js:10605
performUnitOfWork @ react-dom.development.js:12573
workLoop @ react-dom.development.js:12682
callCallback @ react-dom.development.js:1299
invokeGuardedCallbackDev @ react-dom.development.js:1338
invokeGuardedCallback @ react-dom.development.js:1195
performWork @ react-dom.development.js:12800
batchedUpdates @ react-dom.development.js:13244
performFiberBatchedUpdates @ react-dom.development.js:1646
stackBatchedUpdates @ react-dom.development.js:1637
batchedUpdates @ react-dom.development.js:1651
batchedUpdatesWithControlledComponents @ react-dom.development.js:1664
dispatchEvent @ react-dom.development.js:1874

P.S. is this component in use somewhere, is it still maintained? It does not seem like Antd uses it

No possibility to open cropper with custom file upload

Since Cropper is opened when previewImage is available and it can be changed only via internal Uploader there is no way to pass file directly and open Cropper instantly without the need to select file from file system.

cropping/src/CropViewer.tsx

Line 166 in 79334d6

if (previewImage) {

Cropper options?

Hi @RaoHai, thanks for putting out this library! I had a couple of questions around the options available -

Is it possible to implement this without the modal? I'm looking to do it on the page itself, ideally.
For centered circular cropper in the screenshot, can you share the options needed to do that?

Thank you!

Not able to Drag image in mobile browser

Hello,

rc-cropping is very helpful for crop photos but the thing is we are not able to drag a image in any mobile browser.

Please suggest.

Recommend Projects

React

A declarative, efficient, and flexible JavaScript library for building user interfaces.
Vue.js

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript

TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
TensorFlow

An Open Source Machine Learning Framework for Everyone
Django

The Web framework for perfectionists with deadlines.
Laravel

A PHP framework for web artisans
D3

Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

javascript

JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
web

Some thing interesting about web. New door for the world.
server

A server is a program made to process requests and deliver data to clients.
Machine learning

Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Visualization

Some thing interesting about visualization, use data art
Game

Some thing interesting about game, make everyone happy.

Recommend Org

Facebook

We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft

Open source projects and samples from Microsoft.
Google

Google ❤️ Open Source for everyone.
Alibaba

Alibaba Open Source for everyone
D3

Data-Driven Documents codes.
Tencent

China tencent open source team.

Jobs

Jooble