1 | # rc-cropping
|
2 | ---
|
3 |
|
4 | React cropping Component
|
5 |
|
6 |
|
7 | [![NPM version][npm-image]][npm-url]
|
8 | [![build status][travis-image]][travis-url]
|
9 | [![Test coverage][coveralls-image]][coveralls-url]
|
10 | [![gemnasium deps][gemnasium-image]][gemnasium-url]
|
11 | [![node version][node-image]][node-url]
|
12 | [![npm download][download-image]][download-url]
|
13 | [![Sauce Test Status](https://saucelabs.com/buildstatus/rc-cropping)](https://saucelabs.com/u/rc-cropping)
|
14 |
|
15 | [![Sauce Test Status](https://saucelabs.com/browser-matrix/rc-cropping.svg)](https://saucelabs.com/u/rc-cropping)
|
16 |
|
17 | [npm-image]: http://img.shields.io/npm/v/rc-cropping.svg?style=flat-square
|
18 | [npm-url]: http://npmjs.org/package/rc-cropping
|
19 | [travis-image]: https://img.shields.io/travis/react-component/cropping.svg?style=flat-square
|
20 | [travis-url]: https://travis-ci.org/react-component/cropping
|
21 | [coveralls-image]: https://img.shields.io/coveralls/react-component/cropping.svg?style=flat-square
|
22 | [coveralls-url]: https://coveralls.io/r/react-component/cropping?branch=master
|
23 | [gemnasium-image]: http://img.shields.io/gemnasium/react-component/cropping.svg?style=flat-square
|
24 | [gemnasium-url]: https://gemnasium.com/react-component/cropping
|
25 | [node-image]: https://img.shields.io/badge/node.js-%3E=_0.10-green.svg?style=flat-square
|
26 | [node-url]: http://nodejs.org/download/
|
27 | [download-image]: https://img.shields.io/npm/dm/rc-cropping.svg?style=flat-square
|
28 | [download-url]: https://npmjs.org/package/rc-cropping
|
29 |
|
30 |
|
31 | ## Browser Support
|
32 |
|
33 | |![IE](https://raw.github.com/alrra/browser-logos/master/internet-explorer/internet-explorer_48x48.png) | ![Chrome](https://raw.github.com/alrra/browser-logos/master/chrome/chrome_48x48.png) | ![Firefox](https://raw.github.com/alrra/browser-logos/master/firefox/firefox_48x48.png) | ![Opera](https://raw.github.com/alrra/browser-logos/master/opera/opera_48x48.png) | ![Safari](https://raw.github.com/alrra/browser-logos/master/safari/safari_48x48.png)|
|
34 | | --- | --- | --- | --- | --- |
|
35 | | IE 8+ ✔ | Chrome 31.0+ ✔ | Firefox 31.0+ ✔ | Opera 30.0+ ✔ | Safari 7.0+ ✔ |
|
36 |
|
37 | ## Screenshots
|
38 |
|
39 | <img src="https://zos.alipayobjects.com/rmsportal/vrydErgwuwLzNpQ.png" width="288"/>
|
40 |
|
41 |
|
42 | ## Development
|
43 |
|
44 | ```
|
45 | npm install
|
46 | npm start
|
47 | ```
|
48 |
|
49 | ## Example
|
50 |
|
51 | http://localhost:8001/examples/
|
52 |
|
53 |
|
54 | online example: http://react-component.github.io/cropping/
|
55 |
|
56 |
|
57 | ## Feature
|
58 |
|
59 | * support ie8,ie8+,chrome,firefox,safari
|
60 |
|
61 |
|
62 | ## install
|
63 |
|
64 |
|
65 | [![rc-cropping](https://nodei.co/npm/rc-cropping.png)](https://npmjs.org/package/rc-cropping)
|
66 |
|
67 |
|
68 | ## Usage
|
69 |
|
70 | ```js
|
71 | var Cropping = require('rc-cropping');
|
72 | var React = require('react');
|
73 |
|
74 | ReactDOM.render(<CropViewer
|
75 | getSpinContent={() => <span>loading...</span> }
|
76 | renderModal={() => <Dialog />}
|
77 | circle={true}
|
78 | />, document.getElementById('__react-content'));
|
79 | ```
|
80 |
|
81 | ## API
|
82 |
|
83 | ### props
|
84 |
|
85 | <table class="table table-bordered table-striped">
|
86 | <thead>
|
87 | <tr>
|
88 | <th style="width: 100px;">name</th>
|
89 | <th style="width: 50px;">type</th>
|
90 | <th style="width: 50px;">default</th>
|
91 | <th>description</th>
|
92 | </tr>
|
93 | </thead>
|
94 | <tbody>
|
95 | <tr>
|
96 | <td>className</td>
|
97 | <td>String</td>
|
98 | <td></td>
|
99 | <td>additional css class of root dom node</td>
|
100 | </tr>
|
101 | <tr>
|
102 | <td>getSpinContent</td>
|
103 | <td>Function() => React.Component<any, any></td>
|
104 | <td></td>
|
105 | <td> spin content of Cropper</td>
|
106 | </tr>
|
107 | <tr>
|
108 | <td>renderModal</td>
|
109 | <td>Function() => React.Component<any, any></td>
|
110 | <td></td>
|
111 | <td> Modal Render of Component, you can pass any React Component to replace it.</td>
|
112 | </tr>
|
113 | <tr>
|
114 | <td>circle</td>
|
115 | <td>boolean</td>
|
116 | <td>false</td>
|
117 | <td> Croppe circle image or not. If true, you'll get a circle picture. Notice: transparent background *ONLY* supported in png file, croppe jpg file will get black background. </td>
|
118 | </tr>
|
119 | </tbody>
|
120 | </table>
|
121 |
|
122 |
|
123 | ## Test Case
|
124 |
|
125 | ```
|
126 | npm test
|
127 | npm run chrome-test
|
128 | ```
|
129 |
|
130 | ## Coverage
|
131 |
|
132 | ```
|
133 | npm run coverage
|
134 | ```
|
135 |
|
136 | open coverage/ dir
|
137 |
|
138 | ## License
|
139 |
|
140 | rc-cropping is released under the MIT license.
|