react-cropperjs

WebJar for react-cropperjs

License

License

MIT
Categories

Categories

React User Interface Web Frameworks
GroupId

GroupId

org.webjars.npm
ArtifactId

ArtifactId

react-cropperjs
Last Version

Last Version

1.2.2
Release Date

Release Date

Type

Type

jar
Description

Description

react-cropperjs
WebJar for react-cropperjs
Project URL

Project URL

http://webjars.org
Source Code Management

Source Code Management

https://github.com/TAPP-TV/react-cropperjs

Download react-cropperjs

How to add to project

<!-- https://jarcasting.com/artifacts/org.webjars.npm/react-cropperjs/ -->
<dependency>
    <groupId>org.webjars.npm</groupId>
    <artifactId>react-cropperjs</artifactId>
    <version>1.2.2</version>
</dependency>
// https://jarcasting.com/artifacts/org.webjars.npm/react-cropperjs/
implementation 'org.webjars.npm:react-cropperjs:1.2.2'
// https://jarcasting.com/artifacts/org.webjars.npm/react-cropperjs/
implementation ("org.webjars.npm:react-cropperjs:1.2.2")
'org.webjars.npm:react-cropperjs:jar:1.2.2'
<dependency org="org.webjars.npm" name="react-cropperjs" rev="1.2.2">
  <artifact name="react-cropperjs" type="jar" />
</dependency>
@Grapes(
@Grab(group='org.webjars.npm', module='react-cropperjs', version='1.2.2')
)
libraryDependencies += "org.webjars.npm" % "react-cropperjs" % "1.2.2"
[org.webjars.npm/react-cropperjs "1.2.2"]

Dependencies

compile (1)

Group / Artifact Type Version
org.webjars.npm : cropperjs jar [0.5.2,0.6)

Project Modules

There are no modules declared in this project.

react-cropperjs

A React Component wrapper of cropperjs without jQuery as a dependency. If you want to use jQuery, check out the original project react-cropper.

NPM

Demo

See the demo in action

Installation

Install via npm

npm install --save react-cropperjs

Webpack User

You also need a couple of loaders for webpack

npm install --save-dev style-loader css-loader

Browserify User

https://github.com/cheton/browserify-css

npm i --save-dev browserify-css

Compile your project with command line like

 browserify -t reactify -g browserify-css index.jsx > bundle.js

If you are using gulp, browserify or other build tools, make sure you enable global option true

For example in gulp you should do

b.transform(browserifycss, {global: true});

Quick Example using ES6

import React from 'react';
import CropperJS from 'react-cropperjs';

class Demo extends React.Component {

  _crop(){
    // image in dataUrl
    console.log(this.refs.cropper.getCroppedCanvas().toDataURL());
  }

  render() {
    return (
      <CropperJS
        ref='cropper'
        src='http://i.imgur.com/n483ZwJ.jpg'
        style={{height: 400, width: '100%'}}
        // Cropper.js options
        aspectRatio={16 / 9}
        guides={false}
        crop={this._crop.bind(this)} />
    );
  }
}

And for those working in ES5:

var React = require('react');
var CropperJS = require('react-cropperjs');

var Demo = React.createClass({

  _crop: function() {
    // image in dataUrl
    console.log(this.refs.cropper.getCroppedCanvas().toDataURL());
  },

  render: function() {
    return (
      <CropperJS
        ref='cropper'
        src='http://i.imgur.com/n483ZwJ.jpg'
        style={{height: 400, width: '100%'}}
        // Cropper.js options
        aspectRatio={16 / 9}
        guides={false}
        crop={this._crop} />
    );
  }
});

Options

src

  • Type: string
  • Default: null
  <CropperJS src='http://i.imgur.com/n483ZwJ.jpg' />

Other options

Accepts all options available in cropperjs as attributes. See docs.

  <CropperJS
    src='http://i.imgur.com/n483ZwJ.jpg'
    aspectRatio={16 / 9}
    guides={false}
    crop={this._crop} />

Methods

Assign a ref attribute to use methods

import React from 'react';
import CropperJS from 'react-cropperjs';

class Demo extends React.Component {

  _crop() {
    let dataUrl = this.refs.cropper.getCroppedCanvas().toDataURL();
    console.log(dataUrl);
  }

  render () {
    return (
      <CropperJS
        ref='cropper'
        src='http://i.imgur.com/n483ZwJ.jpg'
        crop={this._crop.bind(this)} />
    );
  }
}

React.createClass has a built-in magic feature that binds all methods to this automatically for you. When using ES6 syntax, remember to pre-bind in the constructor or in the attribute (as shown in the above example). Otherwise See [autobinding](https://facebook.github.io/react/blog/2015/01/27/react-v0.13.0-beta-1. html#autobinding) docs for more details.

Callbacks

Unlike cropper, cropperjs doesn't support events, it supports the following callbacks:

import React from 'react';
import CropperJS from 'react-cropperjs';

class CallbackDemo extends React.Component {
   _build() {
      console.log('_build');
   }
   _built() {
      console.log('_built');
   }
   _cropstart(data) {
      console.log('_cropstart', data.action);
   }
   _cropmove(data) {
      console.log('_cropmove', data.action);
   }
   _cropend(data) {
      console.log('_cropend', data.action);
   }
   _zoom(data) {
      console.log('_zoom', data.ratio);
   }
   _crop(data) {
      console.log('_crop', data);
   }
   render() {
      return (
         <CropperJS
           ref='cropper'
           src='http://i.imgur.com/n483ZwJ.jpg'
           build={this._build}
           built={this._built}
           cropstart={this._cropstart}
           cropmove={this._cropmove}
           cropend={this._cropend}
           zoom={this._zoom}
           crop={this._crop} />
         );
   }
}

Remember to bind this in the attributes or pre-bind constructor if you're going to be accessing this in the callback methods.

Build

npm run build

Build example

npm run build-example

Related Projects

JavaScript Canvas to Blob

A lot of times, you'll get a canvas element drawn with the cropped image and will need to upload it to the server.

You can use canvas.toDataURL to get a Data URL, or use canvas.toBlob to get a blob and upload it to server with FormData if the browser supports these APIs.

License

MIT

org.webjars.npm

TAPP TV

Versions

Version
1.2.2