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 |
|
14 | [npm-image]: http://img.shields.io/npm/v/rc-cropping.svg?style=flat-square
|
15 | [npm-url]: http://npmjs.org/package/rc-cropping
|
16 | [travis-image]: https://img.shields.io/travis/react-component/cropping.svg?style=flat-square
|
17 | [travis-url]: https://travis-ci.org/react-component/cropping
|
18 | [coveralls-image]: https://img.shields.io/coveralls/react-component/cropping.svg?style=flat-square
|
19 | [coveralls-url]: https://coveralls.io/r/react-component/cropping?branch=master
|
20 | [gemnasium-image]: http://img.shields.io/gemnasium/react-component/cropping.svg?style=flat-square
|
21 | [gemnasium-url]: https://gemnasium.com/react-component/cropping
|
22 | [node-image]: https://img.shields.io/badge/node.js-%3E=_0.10-green.svg?style=flat-square
|
23 | [node-url]: http://nodejs.org/download/
|
24 | [download-image]: https://img.shields.io/npm/dm/rc-cropping.svg?style=flat-square
|
25 | [download-url]: https://npmjs.org/package/rc-cropping
|
26 |
|
27 | ## Feature
|
28 |
|
29 | * Cropping pictures in facebook mode.
|
30 | * Cropping result preview.
|
31 | * Supports exporting circle and square picture.
|
32 | * I18n.
|
33 | * [FUTURE] Rotate picture.
|
34 |
|
35 | ## Screenshots
|
36 |
|
37 | <img src="https://zos.alipayobjects.com/rmsportal/vrydErgwuwLzNpQ.png" width="288"/>
|
38 |
|
39 |
|
40 | ## Development
|
41 |
|
42 | ```
|
43 | npm install
|
44 | npm start
|
45 | ```
|
46 |
|
47 | ## Example
|
48 |
|
49 | http://localhost:8001/examples/
|
50 |
|
51 |
|
52 | online example: http://react-component.github.io/cropping/
|
53 |
|
54 | ## install
|
55 |
|
56 |
|
57 | [![rc-cropping](https://nodei.co/npm/rc-cropping.png)](https://npmjs.org/package/rc-cropping)
|
58 |
|
59 |
|
60 | ## Usage
|
61 |
|
62 | ```js
|
63 | var Cropping = require('rc-cropping');
|
64 | var React = require('react');
|
65 |
|
66 | ReactDOM.render(<CropViewer
|
67 | getSpinContent={() => <span>loading...</span> }
|
68 | renderModal={() => <Dialog />}
|
69 | circle={true}
|
70 | />, document.getElementById('__react-content'));
|
71 | ```
|
72 |
|
73 | ## API
|
74 |
|
75 | ### props
|
76 |
|
77 | <table class="table table-bordered table-striped">
|
78 | <thead>
|
79 | <tr>
|
80 | <th style="width: 100px;">name</th>
|
81 | <th style="width: 50px;">type</th>
|
82 | <th style="width: 50px;">default</th>
|
83 | <th>description</th>
|
84 | </tr>
|
85 | </thead>
|
86 | <tbody>
|
87 | <tr>
|
88 | <td>className</td>
|
89 | <td>String</td>
|
90 | <td></td>
|
91 | <td>additional css class of root dom node</td>
|
92 | </tr>
|
93 | <tr>
|
94 | <td>getSpinContent</td>
|
95 | <td>Function() => React.Component<any, any></td>
|
96 | <td></td>
|
97 | <td> spin content of Cropper</td>
|
98 | </tr>
|
99 | <tr>
|
100 | <td>renderModal</td>
|
101 | <td>Function() => React.Component<any, any></td>
|
102 | <td></td>
|
103 | <td> Modal Render of Component, you can pass any React Component to replace it.</td>
|
104 | </tr>
|
105 | <tr>
|
106 | <td>locale</td>
|
107 | <td>'en-US' | 'zh-CN'</td>
|
108 | <td></td>
|
109 | <td> i18n locale.</td>
|
110 | </tr>
|
111 | <tr>
|
112 | <td>circle</td>
|
113 | <td>boolean</td>
|
114 | <td>false</td>
|
115 | <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 white background. </td>
|
116 | </tr>
|
117 | <tr>
|
118 | <td>resizer</td>
|
119 | <td>function</td>
|
120 | <td>null</td>
|
121 | <td> Cropper support custom image resize function, e.g., you can use [pica](https://github.com/nodeca/pica) to down scale your picture more perfectly </td>
|
122 | </tr>
|
123 | </tbody>
|
124 | </table>
|
125 |
|
126 |
|
127 | ## Test Case
|
128 |
|
129 | ```
|
130 | npm test
|
131 | npm run chrome-test
|
132 | ```
|
133 |
|
134 | ## Coverage
|
135 |
|
136 | ```
|
137 | npm run coverage
|
138 | ```
|
139 |
|
140 | open coverage/ dir
|
141 |
|
142 | ## License
|
143 |
|
144 | rc-cropping is released under the MIT license.
|