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 | [](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(| name | 81 |type | 82 |default | 83 |description | 84 |
|---|---|---|---|
| className | 89 |String | 90 |91 | | additional css class of root dom node | 92 |
| getSpinContent | 95 |Function() => React.Component |
96 | 97 | | spin content of Cropper | 98 |
| renderModal | 101 |Function() => React.Component |
102 | 103 | | Modal Render of Component, you can pass any React Component to replace it. | 104 |
| locale | 107 |'en-US' | 'zh-CN' | 108 |109 | | i18n locale. | 110 |
| circle | 113 |boolean | 114 |false | 115 |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. | 116 |
| resizer | 119 |function | 120 |null | 121 |Cropper support custom image resize function, e.g., you can use [pica](https://github.com/nodeca/pica) to down scale your picture more perfectly | 122 |
21 | 开始上传
22 | loading... }
24 | renderModal={() => }
25 | locale="zh-CN"
26 | ref={ele => this.cropper = ele}
27 | circle
28 | />
29 |
);
30 | }
31 | }
32 |
33 | ReactDOM.render(
14 | {props.title}
15 | {props.children}
16 | {props.footer}
17 |
);
18 | }
19 |
20 | CropperContainer.propTypes = {
21 | title: PropTypes.any,
22 | children: PropTypes.any,
23 | footer: PropTypes.any,
24 | };
25 |
26 |
27 | class Test extends React.Component {
28 | constructor() {
29 | super();
30 | this.state = {
31 | file: null,
32 | croppedFile: null,
33 | };
34 | }
35 | onChange = () => {
36 | this.setState({ file: this.refs.file.files[0] });
37 | }
38 | croppeFile = (fileBlob) => {
39 | const reader = new FileReader();
40 | reader.readAsDataURL(fileBlob);
41 | reader.onload = () => {
42 | this.setState({
43 | croppedFile: reader.result,
44 | });
45 | };
46 | }
47 | render() {
48 | const { croppedFile, file } = this.state;
49 | if (croppedFile) {
50 | return
158 |
;
165 | }
166 | if (previewImage) {
167 | return
159 | 
163 |
164 |
160 |
162 |
387 |
) : null;
437 | if (image) {
438 | return (
388 |
413 |
389 | 
408 | {scale > scaleRange[0] ?
412 |
390 |
397 |
398 |
409 | {getLocale('drag to crop', this.props.locale)}
410 |
: null}
411 |
414 |
436 | {getLocale('preview', this.props.locale)}
415 |
416 |
423 |
425 | 2x: {`${this.getThumbnailSize(0)[0]}px * ${this.getThumbnailSize(0)[1]}px`}
424 |
426 |
433 |
435 | 1x: {`${this.getThumbnailSize(1)[0]}px * ${this.getThumbnailSize(1)[1]}px`}
434 |
439 | {spin}
440 | {renderModal ? React.cloneElement(renderModal(), {
441 | visible: this.state.visible,
442 | title: getLocale('edit picture', this.props.locale),
443 | width: 800,
444 | footer,
445 | onCancel: this.handleCancel,
446 | }, cropperElement) :
);
449 | }
450 |
451 | return loading... ;
452 | }
453 | }
454 |
--------------------------------------------------------------------------------
/src/Icon.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 |
3 | export default function Icon(props) {
4 | return ;
5 | }
6 |
--------------------------------------------------------------------------------
/src/Scaler.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import Slider from 'rc-slider';
3 | import Icon from './Icon';
4 |
5 | const maxValue = 1.7777;
6 |
7 | export default function CropViewer(props) {
8 | const { min, prefixCls, value } = props;
9 | if (min > maxValue || Math.abs(min - maxValue) < 0.2) {
10 | return {cropperElement} {footer}
447 | }
448 |
11 | 图像已缩放至最大比例，无法继续缩放。
12 |
;
13 | }
14 | return (
15 |
18 |
);
30 | }
31 |
--------------------------------------------------------------------------------
/src/Uploader.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import Icon from './Icon';
3 |
4 | export interface IFileMeta {
5 | name: string;
6 | type: string;
7 | };
8 |
9 | export interface IUploaderProps {
10 | onSelectImage: (file: File) => void;
11 | prefixCls?: string;
12 | accept?: string;
13 | };
14 |
15 | export default class Uploader extends React.Component