react-cropper

WebJar for react-cropper

License	MIT
Categories	Github Development Tools Version Controls React User Interface Web Frameworks
GroupId	org.webjars.npm
ArtifactId	github-com-roadmanfong-react-cropper
Last Version	0.9.4
Release Date	Sep 1, 2016
Type	jar
Description	react-cropper WebJar for react-cropper
Project URL	http://webjars.org
Source Code Management	https://github.com/roadmanfong/react-cropper

Download github-com-roadmanfong-react-cropper

Filename	Size
github-com-roadmanfong-react-cropper-0.9.4.pom
github-com-roadmanfong-react-cropper-0.9.4.jar	12 KB
github-com-roadmanfong-react-cropper-0.9.4-sources.jar	22 bytes
github-com-roadmanfong-react-cropper-0.9.4-javadoc.jar	22 bytes

How to add to project

Apache Maven

<!-- https://jarcasting.com/artifacts/org.webjars.npm/github-com-roadmanfong-react-cropper/ -->
<dependency>
    <groupId>org.webjars.npm</groupId>
    <artifactId>github-com-roadmanfong-react-cropper</artifactId>
    <version>0.9.4</version>
</dependency>

Gradle Groovy

// https://jarcasting.com/artifacts/org.webjars.npm/github-com-roadmanfong-react-cropper/
implementation 'org.webjars.npm:github-com-roadmanfong-react-cropper:0.9.4'

Gradle Kotlin

// https://jarcasting.com/artifacts/org.webjars.npm/github-com-roadmanfong-react-cropper/
implementation ("org.webjars.npm:github-com-roadmanfong-react-cropper:0.9.4")

Apache Buildr

'org.webjars.npm:github-com-roadmanfong-react-cropper:jar:0.9.4'

Apache Ivy

<dependency org="org.webjars.npm" name="github-com-roadmanfong-react-cropper" rev="0.9.4">
  <artifact name="github-com-roadmanfong-react-cropper" type="jar" />
</dependency>

Groovy Grape

@Grapes(
@Grab(group='org.webjars.npm', module='github-com-roadmanfong-react-cropper', version='0.9.4')
)

Scala SBT

libraryDependencies += "org.webjars.npm" % "github-com-roadmanfong-react-cropper" % "0.9.4"

Leiningen

[org.webjars.npm/github-com-roadmanfong-react-cropper "0.9.4"]

Dependencies

compile (3)

Group / Artifact	Type	Version
org.webjars.npm : cropperjs	jar	[0.8.0,0.9)
org.webjars.npm : react	jar	[15.0.0,16)
org.webjars.npm : react-dom	jar	[15.0.0,16)

Project Modules

There are no modules declared in this project.

react-cropper

Cropperjs as React component

Demo

Click for a Demo

Docs

• Image Cropper

Installation

Install via npm

npm install --save react-cropper

You need cropper.css in your project which is from cropperjs. Since this project have dependency on cropperjs, it located in /node_modules/react-cropper/node_modules/cropperjs/dist/cropper.css or node_modules/cropperjs/dist/cropper.css for npm version 3.0.0 later

Breaking Change (version >= 2.0.0)

1. Support for ref has been removed. Use the onInitialized method to get the cropper instance. Added back ref support in 2.1.0.
2. To set initial aspect ratio, instead of using aspectRatio use initialAspectRatio.
3. Props data, canvasData and cropBoxData are directly passed on to cropperjs and their respective setters are not called as earlier.
4. React Cropper now does not try to use/execute moveTo as earlier. Directly use the moveTo method from the cropper instance.
5. React Cropper does not depend on @types/react-cropper and provides its own types. Please uninstall/remove @types/react-cropper as they might 'cause issues.

Quick Example

import React, { useRef } from "react";
import Cropper from "react-cropper";
import "cropperjs/dist/cropper.css";

const Demo: React.FC = () => {
  const cropperRef = useRef<HTMLImageElement>(null);
  const onCrop = () => {
    const imageElement: any = cropperRef?.current;
    const cropper: any = imageElement?.cropper;
    console.log(cropper.getCroppedCanvas().toDataURL());
  };

  return (
    <Cropper
      src="https://raw.githubusercontent.com/roadmanfong/react-cropper/master/example/img/child.jpg"
      style={{ height: 400, width: "100%" }}
      // Cropper.js options
      initialAspectRatio={16 / 9}
      guides={false}
      crop={onCrop}
      ref={cropperRef}
    />
  );
};

Options

src

• Type: string
• Default: null

<Cropper src="http://fengyuanchen.github.io/cropper/images/picture.jpg" />

alt

• Type: string
• Default: picture

crossOrigin

• Type: string
• Default: null

dragMode

https://github.com/fengyuanchen/cropperjs#dragmode

scaleX

https://github.com/fengyuanchen/cropperjs#scalexscalex

scaleY

https://github.com/fengyuanchen/cropperjs#scalexscaley

enable

https://github.com/fengyuanchen/cropperjs#enable

disable

https://github.com/fengyuanchen/cropperjs#disable

zoomTo

https://github.com/fengyuanchen/cropperjs#zoomto

rotateTo

https://github.com/fengyuanchen/cropperjs#rotateto

Other options

Accept all options in the docs as properties.

Methods

Use the cropper instance from onInitialized to access cropperjs methods

Build

npm run build

Development

npm start

Author

Fong Kuanghuei

Maintainer

Shubhendu Shekhar

License

MIT

Versions

Version
0.9.4 Sep 1, 2016