50 |
51 | 
}
68 |
69 | )
70 | }
71 | })
72 |
73 | ReactDOM.render(
52 | {this.state.image &&
53 |
62 |
54 |
}
61 |
63 |
64 |
65 |
66 | {this.state.previewUrl &&
67 |
59 |
60 |
61 | {
62 |
63 | this.state.image &&
64 |
65 |
84 | }
85 |
86 |
87 | );
88 | }
89 | }
90 | ```
91 |
92 | ###Props###
93 |
94 | ####`width`####
95 | This is the desired width that you would like the image to be cropped to. The width of the cropper will be scaled to fit this size. This prop also helps determine the minimum width that the cropper can be.
96 |
97 | ####`height`####
98 | This is the desired height that you would like the image to be cropped to. The height of the cropper will be scaled to fit this size. This prop also helps determine the minimum height that the cropper can be. The width and height aspect ratio will be preserved while resizing the cropper.
99 |
100 | ####`image`####
101 | A `blob` of the original image that you wish to crop.
102 |
103 | ####`widthLabel`####
104 | The label to use next to the width input used for keyboard users. This is especially useful if you need to localize the text. The default is "Width".
105 |
106 | ####`heightLabel`####
107 | The label to use next to the height input used for keyboard users. This is especially useful if you need to localize the text. The default is "Height".
108 |
109 | ####`offsetXLabel`####
110 | The label to use next to the offset X input used for keyboard users. This is especially useful if you need to localize the text. The default is "Offset X".
111 |
112 | ####`offsetYLabel`####
113 | The label to use next to the offset Y input used for keyboard users. This is especially useful if you need to localize the text. The default is "Offset Y".
114 |
115 | ###Running the Example###
116 | - Clone the repo
117 | - `npm i`
118 | - `npm run docs`
119 | - Visit `localhost:8080`
120 |
--------------------------------------------------------------------------------
/lib/index.src.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import DraggableResizableBox from './draggable-resizable-box'
3 | import toBlob from 'data-uri-to-blob'
4 | import './cropper.css'
5 |
6 | export default React.createClass({
7 | displayName: 'Cropper',
8 |
9 | propTypes: {
10 | width: React.PropTypes.number.isRequired,
11 | height: React.PropTypes.number.isRequired,
12 | center: React.PropTypes.bool,
13 | image: React.PropTypes.any,
14 | widthLabel: React.PropTypes.string,
15 | heightLabel: React.PropTypes.string,
16 | offsetXLabel: React.PropTypes.string,
17 | offsetYLabel: React.PropTypes.string,
18 | onImageLoaded: React.PropTypes.func,
19 | minConstraints: React.PropTypes.arrayOf(React.PropTypes.number)
20 | },
21 |
22 | getDefaultProps () {
23 | return {
24 | center: false,
25 | width: 'Width',
26 | height: 'Height',
27 | offsetXLabel: 'Offset X',
28 | offsetYLabel: 'Offset Y'
29 | }
30 | },
31 |
32 | getInitialState () {
33 | return {
34 | imageLoaded: false,
35 | width: this.props.width,
36 | height: this.props.height,
37 | url: window.URL.createObjectURL(this.props.image)
38 | }
39 | },
40 |
41 | componentWillReceiveProps (nextProps) {
42 | if (this.props.image !== nextProps.image) {
43 | this.setState({
44 | url: window.URL.createObjectURL(nextProps.image),
45 | imageLoaded: false
46 | })
47 | }
48 | },
49 |
50 | shouldComponentUpdate (nextProps, nextState) {
51 | let {image} = this.props
52 | return nextProps.image.size !== image.size ||
53 | nextProps.image.name !== image.name ||
54 | nextProps.image.type !== image.type ||
55 | nextState.imageLoaded !== this.state.imageLoaded
56 | },
57 |
58 | onLoad (evt) {
59 | let box = this.refs.box.getBoundingClientRect()
60 | this.setState({
61 | imageLoaded: true,
62 | width: box.width,
63 | height: box.height
64 | }, () => {
65 | let img = this.refs.image
66 | this.props.onImageLoaded && this.props.onImageLoaded(img)
67 | })
68 | },
69 |
70 | cropImage () {
71 | return new Promise((resolve, reject) => {
72 | let img = new Image()
73 | img.onload = () => {
74 | let canvas = this.refs.canvas
75 | let img = this.refs.image
76 | let ctx = canvas.getContext('2d')
77 | let [xScale, yScale] = [img.naturalWidth / this.state.width,
78 | img.naturalHeight / this.state.height]
79 |
80 | let imageOffsetX = xScale < 1 ? 0 : this.state.offset.left * xScale
81 | let imageOffsetY = yScale < 1 ? 0 : this.state.offset.top * yScale
82 | let imageWidth = xScale < 1 ? img.naturalWidth : this.state.dimensions.width * xScale
83 | let imageHeight = yScale < 1 ? img.naturalHeight : this.state.dimensions.height * yScale
84 |
85 | let canvasOffsetX = xScale < 1 ? Math.floor((this.state.dimensions.width - img.naturalWidth) / 2) : 0
86 | let canvasOffsetY = yScale < 1 ? Math.floor((this.state.dimensions.height - img.naturalHeight) / 2) : 0
87 | let canvasWidth = xScale < 1 ? img.naturalWidth : this.props.width
88 | let canvasHeight = yScale < 1 ? img.naturalHeight : this.props.height
89 |
90 | ctx.clearRect(0, 0, this.props.width, this.props.height)
91 | ctx.drawImage(img, imageOffsetX, imageOffsetY, imageWidth, imageHeight, canvasOffsetX, canvasOffsetY, canvasWidth, canvasHeight)
92 | resolve(toBlob(canvas.toDataURL()))
93 | }
94 | img.src = window.URL.createObjectURL(this.props.image)
95 | })
96 | },
97 |
98 | onChange (offset, dimensions) {
99 | this.setState({offset, dimensions})
100 | },
101 |
102 | render () {
103 | return (
104 |
66 |
77 |
78 | }
79 |
80 | {
81 | this.state.previewUrl &&
82 |
83 |
111 |
117 | 
123 | {this.state.imageLoaded &&
124 |
139 | )
140 | }
141 | })
142 |
--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | Object.defineProperty(exports, "__esModule", {
4 | value: true
5 | });
6 |
7 | var _react = require('react');
8 |
9 | var _react2 = _interopRequireDefault(_react);
10 |
11 | var _draggableResizableBox = require('./draggable-resizable-box');
12 |
13 | var _draggableResizableBox2 = _interopRequireDefault(_draggableResizableBox);
14 |
15 | var _dataUriToBlob = require('data-uri-to-blob');
16 |
17 | var _dataUriToBlob2 = _interopRequireDefault(_dataUriToBlob);
18 |
19 | require('./cropper.css');
20 |
21 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
22 |
23 | exports.default = _react2.default.createClass({
24 | displayName: 'Cropper',
25 |
26 | propTypes: {
27 | width: _react2.default.PropTypes.number.isRequired,
28 | height: _react2.default.PropTypes.number.isRequired,
29 | center: _react2.default.PropTypes.bool,
30 | image: _react2.default.PropTypes.any,
31 | widthLabel: _react2.default.PropTypes.string,
32 | heightLabel: _react2.default.PropTypes.string,
33 | offsetXLabel: _react2.default.PropTypes.string,
34 | offsetYLabel: _react2.default.PropTypes.string,
35 | onImageLoaded: _react2.default.PropTypes.func,
36 | minConstraints: _react2.default.PropTypes.arrayOf(_react2.default.PropTypes.number)
37 | },
38 |
39 | getDefaultProps: function getDefaultProps() {
40 | return {
41 | center: false,
42 | width: 'Width',
43 | height: 'Height',
44 | offsetXLabel: 'Offset X',
45 | offsetYLabel: 'Offset Y'
46 | };
47 | },
48 | getInitialState: function getInitialState() {
49 | return {
50 | imageLoaded: false,
51 | width: this.props.width,
52 | height: this.props.height,
53 | url: window.URL.createObjectURL(this.props.image)
54 | };
55 | },
56 | componentWillReceiveProps: function componentWillReceiveProps(nextProps) {
57 | if (this.props.image !== nextProps.image) {
58 | this.setState({
59 | url: window.URL.createObjectURL(nextProps.image),
60 | imageLoaded: false
61 | });
62 | }
63 | },
64 | shouldComponentUpdate: function shouldComponentUpdate(nextProps, nextState) {
65 | var image = this.props.image;
66 |
67 | return nextProps.image.size !== image.size || nextProps.image.name !== image.name || nextProps.image.type !== image.type || nextState.imageLoaded !== this.state.imageLoaded;
68 | },
69 | onLoad: function onLoad(evt) {
70 | var _this = this;
71 |
72 | var box = this.refs.box.getBoundingClientRect();
73 | this.setState({
74 | imageLoaded: true,
75 | width: box.width,
76 | height: box.height
77 | }, function () {
78 | var img = _this.refs.image;
79 | _this.props.onImageLoaded && _this.props.onImageLoaded(img);
80 | });
81 | },
82 | cropImage: function cropImage() {
83 | var _this2 = this;
84 |
85 | return new Promise(function (resolve, reject) {
86 | var img = new Image();
87 | img.onload = function () {
88 | var canvas = _this2.refs.canvas;
89 | var img = _this2.refs.image;
90 | var ctx = canvas.getContext('2d');
91 | var xScale = img.naturalWidth / _this2.state.width,
92 | yScale = img.naturalHeight / _this2.state.height;
93 |
94 |
95 | var imageOffsetX = xScale < 1 ? 0 : _this2.state.offset.left * xScale;
96 | var imageOffsetY = yScale < 1 ? 0 : _this2.state.offset.top * yScale;
97 | var imageWidth = xScale < 1 ? img.naturalWidth : _this2.state.dimensions.width * xScale;
98 | var imageHeight = yScale < 1 ? img.naturalHeight : _this2.state.dimensions.height * yScale;
99 |
100 | var canvasOffsetX = xScale < 1 ? Math.floor((_this2.state.dimensions.width - img.naturalWidth) / 2) : 0;
101 | var canvasOffsetY = yScale < 1 ? Math.floor((_this2.state.dimensions.height - img.naturalHeight) / 2) : 0;
102 | var canvasWidth = xScale < 1 ? img.naturalWidth : _this2.props.width;
103 | var canvasHeight = yScale < 1 ? img.naturalHeight : _this2.props.height;
104 |
105 | ctx.clearRect(0, 0, _this2.props.width, _this2.props.height);
106 | ctx.drawImage(img, imageOffsetX, imageOffsetY, imageWidth, imageHeight, canvasOffsetX, canvasOffsetY, canvasWidth, canvasHeight);
107 | resolve((0, _dataUriToBlob2.default)(canvas.toDataURL()));
108 | };
109 | img.src = window.URL.createObjectURL(_this2.props.image);
110 | });
111 | },
112 | onChange: function onChange(offset, dimensions) {
113 | this.setState({ offset: offset, dimensions: dimensions });
114 | },
115 | render: function render() {
116 | return _react2.default.createElement(
117 | 'div',
118 | {
119 | ref: 'box',
120 | className: 'Cropper',
121 | style: {
122 | minWidth: this.props.width,
123 | minHeight: this.props.height
124 | } },
125 | _react2.default.createElement('canvas', {
126 | className: 'Cropper-canvas',
127 | ref: 'canvas',
128 | width: this.props.width,
129 | height: this.props.height }),
130 | _react2.default.createElement('img', {
131 | ref: 'image',
132 | src: this.state.url,
133 | className: 'Cropper-image',
134 | onLoad: this.onLoad,
135 | style: { top: this.state.height / 2 } }),
136 | this.state.imageLoaded && _react2.default.createElement(
137 | 'div',
138 | { className: 'box' },
139 | _react2.default.createElement(
140 | _draggableResizableBox2.default,
141 | {
142 | aspectRatio: this.props.width / this.props.height,
143 | width: this.state.width,
144 | height: this.state.height,
145 | minConstraints: this.props.minConstraints,
146 | onChange: this.onChange,
147 | widthLabel: this.props.widthLabel,
148 | heightLabel: this.props.heightLabel,
149 | offsetXLabel: this.props.offsetXLabel,
150 | offsetYLabel: this.props.offsetYLabel },
151 | _react2.default.createElement('div', { className: 'Cropper-box' })
152 | )
153 | )
154 | );
155 | }
156 | });
157 |
--------------------------------------------------------------------------------
/lib/draggable-resizable-box.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | export default React.createClass({
4 | displayName: 'DraggableResizableBox',
5 |
6 | propTypes: {
7 | aspectRatio: React.PropTypes.number.isRequired,
8 | width: React.PropTypes.number.isRequired,
9 | height: React.PropTypes.number.isRequired,
10 | onChange: React.PropTypes.func,
11 | offset: React.PropTypes.array,
12 | minConstraints: React.PropTypes.array,
13 | children: React.PropTypes.node,
14 | widthLabel: React.PropTypes.string,
15 | heightLabel: React.PropTypes.string,
16 | offsetXLabel: React.PropTypes.string,
17 | offsetYLabel: React.PropTypes.string
18 | },
19 |
20 | getDefaultProps () {
21 | return {
22 | widthLabel: 'Width',
23 | heightLabel: 'Height',
24 | offsetXLabel: 'Offset X',
25 | offsetYLabel: 'Offset Y'
26 | }
27 | },
28 |
29 | getInitialState () {
30 | let [width, height] = this.preserveAspectRatio(this.props.width, this.props.height)
31 | let centerYOffset = (this.props.height - height) / 2
32 | let centerXOffset = (this.props.width - width) / 2
33 | return {
34 | top: centerYOffset,
35 | left: centerXOffset,
36 | bottom: centerYOffset,
37 | right: centerXOffset,
38 | width: width,
39 | height: height
40 | }
41 | },
42 |
43 | componentDidMount () {
44 | document.addEventListener('mousemove', this.eventMove)
45 | document.addEventListener('mouseup', this.eventEnd)
46 | document.addEventListener('touchmove', this.eventMove)
47 | document.addEventListener('touchend', this.eventEnd)
48 | document.addEventListener('keydown', this.handleKey)
49 | this.props.onChange({
50 | top: this.state.top,
51 | left: this.state.left
52 | }, {
53 | width: this.state.width,
54 | height: this.state.height
55 | })
56 | },
57 |
58 | componentWillUnmount () {
59 | document.removeEventListener('mousemove', this.eventMove)
60 | document.removeEventListener('mouseup', this.eventEnd)
61 | document.removeEventListener('touchmove', this.eventMove)
62 | document.removeEventListener('touchend', this.eventEnd)
63 | document.removeEventListener('keydown', this.handleKey)
64 | },
65 |
66 | calculateDimensions ({top, left, bottom, right}) {
67 | return {width: this.props.width - left - right, height: this.props.height - top - bottom}
68 | },
69 |
70 | // If you do this, be careful of constraints
71 | preserveAspectRatio (width, height) {
72 | if(this.props.minConstraints) {
73 | width = Math.max(width, this.props.minConstraints[0])
74 | height = Math.max(height, this.props.minConstraints[1])
75 | }
76 | const currentAspectRatio = width / height
77 |
78 | if (currentAspectRatio < this.props.aspectRatio) {
79 | return [width, width / this.props.aspectRatio]
80 | } else if (currentAspectRatio > this.props.aspectRatio) {
81 | return [height * this.props.aspectRatio, height]
82 | } else {
83 | return [width, height]
84 | }
85 | },
86 |
87 | constrainBoundary (side) {
88 | return side < 0 ? 0 : side
89 | },
90 |
91 | getClientCoordinates (evt) {
92 | return evt.touches ? {
93 | clientX: evt.touches[0].clientX,
94 | clientY: evt.touches[0].clientY
95 | } :
96 | {
97 | clientX: evt.clientX,
98 | clientY: evt.clientY
99 | }
100 | },
101 |
102 | eventMove (evt) {
103 | if (this.state.resizing) {
104 | this.onResize(evt)
105 | } else if (this.state.moving) {
106 | this.eventMoveBox(evt)
107 | }
108 | },
109 |
110 | eventEnd (evt) {
111 | if (this.state.resizing) {
112 | this.stopResize(evt)
113 | } else if (this.state.moving) {
114 | this.stopMove(evt)
115 | }
116 | },
117 |
118 | // Resize methods
119 | startResize (corner, event) {
120 | event.stopPropagation()
121 | event.preventDefault()
122 | this.setState({
123 | resizing: true,
124 | corner
125 | })
126 | },
127 |
128 | stopResize () {
129 | this.setState({resizing: false})
130 | },
131 |
132 | // resize strategies
133 | nw (mousePos, boxPos) {
134 | let pos = Object.assign({}, this.state, {
135 | top: this.constrainBoundary(mousePos.clientY - boxPos.top),
136 | left: this.constrainBoundary(mousePos.clientX - boxPos.left)
137 | })
138 | let dimensions = this.calculateDimensions(pos)
139 | let [width, height] = this.preserveAspectRatio(dimensions.width, dimensions.height)
140 | pos.top = this.props.height - pos.bottom - height
141 | pos.left = this.props.width - pos.right - width
142 | return pos
143 | },
144 | ne (mousePos, boxPos) {
145 | let pos = Object.assign({}, this.state, {
146 | top: this.constrainBoundary(mousePos.clientY - boxPos.top),
147 | right: this.constrainBoundary(boxPos.right - mousePos.clientX)
148 | })
149 | let dimensions = this.calculateDimensions(pos)
150 | let [width, height] = this.preserveAspectRatio(dimensions.width, dimensions.height)
151 | pos.top = this.props.height - pos.bottom - height
152 | pos.right = this.props.width - pos.left - width
153 | return pos
154 | },
155 | se (mousePos, boxPos) {
156 | let pos = Object.assign({}, this.state, {
157 | bottom: this.constrainBoundary(boxPos.bottom - mousePos.clientY),
158 | right: this.constrainBoundary(boxPos.right - mousePos.clientX)
159 | })
160 | let dimensions = this.calculateDimensions(pos)
161 | let [width, height] = this.preserveAspectRatio(dimensions.width, dimensions.height)
162 | pos.bottom = this.props.height - pos.top - height
163 | pos.right = this.props.width - pos.left - width
164 | return pos
165 | },
166 | sw (mousePos, boxPos) {
167 | let pos = Object.assign({}, this.state, {
168 | bottom: this.constrainBoundary(boxPos.bottom - mousePos.clientY),
169 | left: this.constrainBoundary(mousePos.clientX - boxPos.left)
170 | })
171 | let dimensions = this.calculateDimensions(pos)
172 | let [width, height] = this.preserveAspectRatio(dimensions.width, dimensions.height)
173 | pos.bottom = this.props.height - pos.top - height
174 | pos.left = this.props.width - pos.right - width
175 | return pos
176 | },
177 |
178 | onResize (event) {
179 | let box = this.refs.box.parentElement.parentElement.getBoundingClientRect()
180 | let coordinates = this.getClientCoordinates(event)
181 | let position = this[this.state.corner](coordinates, box)
182 | this.resize(position, coordinates)
183 | },
184 |
185 | controlsResize (event) {
186 | let box = this.refs.box.parentElement.parentElement.getBoundingClientRect()
187 | let width = event.target.name === 'width' ? +event.target.value : +event.target.value * this.props.aspectRatio
188 | let height = event.target.name === 'height' ? +event.target.value : +event.target.value / this.props.aspectRatio
189 | let dimensions = this.preserveAspectRatio(width, height)
190 | width = dimensions[0]
191 | height = dimensions[1]
192 |
193 | if (width > box.width - this.state.left ||
194 | height > box.height - this.state.top) return
195 |
196 | let widthDifference = this.state.width - width
197 | let heightDifference = this.state.height - height
198 | let pos = Object.assign({}, this.state, {
199 | right: this.state.right + widthDifference,
200 | bottom: this.state.bottom + heightDifference
201 | })
202 | let coordinates = {
203 | clientX: box.right - pos.right,
204 | clientY: box.bottom - pos.bottom
205 | }
206 |
207 | this.resize(pos, coordinates)
208 | },
209 |
210 | resize (position, coordinates) {
211 | let dimensions = this.calculateDimensions(position)
212 | var widthChanged = dimensions.width !== this.state.width, heightChanged = dimensions.height !== this.state.height
213 | if (!widthChanged && !heightChanged) return
214 |
215 | this.setState(Object.assign({}, coordinates, position, dimensions), () => {
216 | this.props.onChange({
217 | top: position.top,
218 | left: position.left
219 | }, dimensions)
220 | })
221 | },
222 |
223 | // Move methods
224 | startMove (evt) {
225 | let {clientX, clientY} = this.getClientCoordinates(evt)
226 | this.setState({
227 | moving: true,
228 | clientX: clientX,
229 | clientY: clientY
230 | })
231 | },
232 |
233 | stopMove (evt) {
234 | this.setState({
235 | moving: false
236 | })
237 | },
238 |
239 | eventMoveBox (evt) {
240 | evt.preventDefault()
241 | let {clientX, clientY} = this.getClientCoordinates(evt)
242 | let movedX = clientX - this.state.clientX
243 | let movedY = clientY - this.state.clientY
244 |
245 | this.moveBox(clientX, clientY, movedX, movedY)
246 | },
247 |
248 | controlsMoveBox (evt) {
249 | let movedX = evt.target.name === 'x' ? evt.target.value - this.state.left : 0
250 | let movedY = evt.target.name === 'y' ? evt.target.value - this.state.top : 0
251 | this.moveBox(0, 0, movedX, movedY)
252 | },
253 |
254 | moveBox (clientX, clientY, movedX, movedY) {
255 | let position = {
256 | top: this.constrainBoundary(this.state.top + movedY),
257 | left: this.constrainBoundary(this.state.left + movedX),
258 | bottom: this.constrainBoundary(this.state.bottom - movedY),
259 | right: this.constrainBoundary(this.state.right - movedX)
260 | }
261 |
262 | if (!position.top) {
263 | position.bottom = this.props.height - this.state.height
264 | }
265 | if (!position.bottom) {
266 | position.top = this.props.height - this.state.height
267 | }
268 | if (!position.left) {
269 | position.right = this.props.width - this.state.width
270 | }
271 | if (!position.right) {
272 | position.left = this.props.width - this.state.width
273 | }
274 |
275 | this.setState(Object.assign({}, {
276 | clientX: clientX,
277 | clientY: clientY
278 | }, position), () => {
279 | this.props.onChange({
280 | top: position.top,
281 | left: position.left
282 | }, this.calculateDimensions(position))
283 | })
284 | },
285 |
286 | keyboardResize (change) {
287 | if (this.state.right - change < 0) { return }
288 | if (this.state.bottom - change < 0) { return }
289 |
290 | const [width, height] = this.preserveAspectRatio(
291 | this.state.width + change,
292 | this.state.height + change
293 | )
294 | const widthChange = width - this.state.width
295 | const heightChange = height - this.state.height
296 |
297 | this.setState({
298 | bottom: this.state.bottom - heightChange,
299 | right: this.state.right - widthChange,
300 | width,
301 | height
302 | })
303 | },
304 |
305 | handleKey (event) {
306 | // safari doesn't support event.key, so fall back to keyCode
307 | if (event.shiftKey) {
308 | if (event.key === 'ArrowUp' || event.keyCode === 38) {
309 | this.keyboardResize(-10)
310 | event.preventDefault()
311 | } else if (event.key === 'ArrowDown' || event.keyCode === 40) {
312 | this.keyboardResize(10)
313 | event.preventDefault()
314 | } else if (event.key === 'ArrowLeft' || event.keyCode === 37) {
315 | this.keyboardResize(-10)
316 | event.preventDefault()
317 | } else if (event.key === 'ArrowRight' || event.keyCode === 39) {
318 | this.keyboardResize(10)
319 | event.preventDefault()
320 | }
321 | } else {
322 | if (event.key === 'ArrowUp' || event.keyCode === 38) {
323 | this.moveBox(this.state.clientX, this.state.clientY, 0, -10)
324 | event.preventDefault()
325 | } else if (event.key === 'ArrowDown' || event.keyCode === 40) {
326 | this.moveBox(this.state.clientX, this.state.clientY, 0, 10)
327 | event.preventDefault()
328 | } else if (event.key === 'ArrowLeft' || event.keyCode === 37) {
329 | this.moveBox(this.state.clientX, this.state.clientY, -10, 0)
330 | event.preventDefault()
331 | } else if (event.key === 'ArrowRight' || event.keyCode === 39) {
332 | this.moveBox(this.state.clientX, this.state.clientY, 10, 0)
333 | event.preventDefault()
334 | }
335 | }
336 | },
337 |
338 | render () {
339 | let style = {
340 | position: 'absolute',
341 | top: this.state.top,
342 | left: this.state.left,
343 | right: this.state.right,
344 | bottom: this.state.bottom
345 | }
346 | let {width, height} = this.calculateDimensions(this.state)
347 | let topStyle = {
348 | height: this.state.top
349 | }
350 | let bottomStyle = {
351 | height: this.state.bottom
352 | }
353 | let leftStyle = {
354 | top: this.state.top,
355 | right: width + this.state.right,
356 | bottom: this.state.bottom
357 | }
358 | let rightStyle = {
359 | top: this.state.top,
360 | left: width + this.state.left,
361 | bottom: this.state.bottom
362 | }
363 |
364 | return (
365 |
125 |
135 |
136 |
137 |
}
138 |
366 |
428 | )
429 | }
430 | })
431 |
--------------------------------------------------------------------------------
/dist/react-crop.min.js:
--------------------------------------------------------------------------------
1 | !function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e(require("react")):"function"==typeof define&&define.amd?define(["react"],e):"object"==typeof exports?exports.ReactCrop=e(require("react")):t.ReactCrop=e(t.react)}(this,function(t){return function(t){function e(s){if(i[s])return i[s].exports;var n=i[s]={exports:{},id:s,loaded:!1};return t[s].call(n.exports,n,n.exports,e),n.loaded=!0,n.exports}var i={};return e.m=t,e.c=i,e.p="/",e(0)}([function(t,e,i){"use strict";function s(t){return t&&t.__esModule?t:{"default":t}}Object.defineProperty(e,"__esModule",{value:!0});var n=i(1),o=s(n),r=i(2),a=s(r),h=i(3),l=s(h);i(4),e["default"]=o["default"].createClass({displayName:"Cropper",propTypes:{width:o["default"].PropTypes.number.isRequired,height:o["default"].PropTypes.number.isRequired,center:o["default"].PropTypes.bool,image:o["default"].PropTypes.any,widthLabel:o["default"].PropTypes.string,heightLabel:o["default"].PropTypes.string,offsetXLabel:o["default"].PropTypes.string,offsetYLabel:o["default"].PropTypes.string,onImageLoaded:o["default"].PropTypes.func,minConstraints:o["default"].PropTypes.arrayOf(o["default"].PropTypes.number)},getDefaultProps:function(){return{center:!1,width:"Width",height:"Height",offsetXLabel:"Offset X",offsetYLabel:"Offset Y"}},getInitialState:function(){return{imageLoaded:!1,width:this.props.width,height:this.props.height,url:window.URL.createObjectURL(this.props.image)}},componentWillReceiveProps:function(t){this.props.image!==t.image&&this.setState({url:window.URL.createObjectURL(t.image),imageLoaded:!1})},shouldComponentUpdate:function(t,e){var i=this.props.image;return t.image.size!==i.size||t.image.name!==i.name||t.image.type!==i.type||e.imageLoaded!==this.state.imageLoaded},onLoad:function(t){var e=this,i=this.refs.box.getBoundingClientRect();this.setState({imageLoaded:!0,width:i.width,height:i.height},function(){var t=e.refs.image;e.props.onImageLoaded&&e.props.onImageLoaded(t)})},cropImage:function(){var t=this;return new Promise(function(e,i){var s=new Image;s.onload=function(){var i=t.refs.canvas,s=t.refs.image,n=i.getContext("2d"),o=s.naturalWidth/t.state.width,r=s.naturalHeight/t.state.height,a=1>o?0:t.state.offset.left*o,h=1>r?0:t.state.offset.top*r,p=1>o?s.naturalWidth:t.state.dimensions.width*o,u=1>r?s.naturalHeight:t.state.dimensions.height*r,d=1>o?Math.floor((t.state.dimensions.width-s.naturalWidth)/2):0,c=1>r?Math.floor((t.state.dimensions.height-s.naturalHeight)/2):0,f=1>o?s.naturalWidth:t.props.width,g=1>r?s.naturalHeight:t.props.height;n.clearRect(0,0,t.props.width,t.props.height),n.drawImage(s,a,h,p,u,d,c,f,g),e(l["default"](i.toDataURL()))},s.src=window.URL.createObjectURL(t.props.image)})},onChange:function(t,e){this.setState({offset:t,dimensions:e})},render:function(){return o["default"].createElement("div",{ref:"box",className:"Cropper",style:{minWidth:this.props.width,minHeight:this.props.height}},o["default"].createElement("canvas",{className:"Cropper-canvas",ref:"canvas",width:this.props.width,height:this.props.height}),o["default"].createElement("img",{ref:"image",src:this.state.url,className:"Cropper-image",onLoad:this.onLoad,style:{top:this.state.height/2}}),this.state.imageLoaded&&o["default"].createElement("div",{className:"box"},o["default"].createElement(a["default"],{aspectRatio:this.props.width/this.props.height,width:this.state.width,height:this.state.height,minConstraints:this.props.minConstraints,onChange:this.onChange,widthLabel:this.props.widthLabel,heightLabel:this.props.heightLabel,offsetXLabel:this.props.offsetXLabel,offsetYLabel:this.props.offsetYLabel},o["default"].createElement("div",{className:"Cropper-box"}))))}})},function(e,i){e.exports=t},function(t,e,i){"use strict";function s(t){return t&&t.__esModule?t:{"default":t}}Object.defineProperty(e,"__esModule",{value:!0});var n=Object.assign||function(t){for(var e=1;e
367 |
376 |
385 |
394 |
403 |
404 |
405 |
406 |
407 | {this.props.children}
408 |
425 |
426 |
427 |
411 |
412 |
415 |
416 |
419 |
420 |
423 |
424 |