react-image-cropper 사용하기

본 포스팅은 facebook React Korea에 올라온 질문을 바탕으로 작성한 포스팅입니다.

프로젝트에 npm 모듈 적용을 어려워하시는 분들을 위한 예제입니다.

시작하겟습니다.

프로젝트를 생성하겠습니다.

create-react-app 을 이용하여 생성하겠습니다.

터미널에서 create-react-app react-image-cropper 으로 프로젝트 생성해주세요.

그리고 react-image-cropper 를 설치해주세요.

npm 을 사용하면,  npm i -S react-image-cropper

yarn 을 사용하면, yarn add react-image-cropper 입니다.

그리고 src/App.js 에 추가해보도록 하겠습니다.

상단에 import 해주세요.

import {Cropper} from 'react-image-cropper'

그리고 원하는 이미지를 넣어주겠습니다.

저는 그냥 파일로써 import하여 사용하겠습니다.

test.jpg라는 이미지 파일을 src 폴더에 넣은뒤 import 하겠습니다.

import testImage from './test.jpg';

App Component Class 작성입니다.

class App extends Component {

constructor(props) {

super(props);

this.state = {

image: '',

imageLoaded: false,

}

}

handleImageLoaded(state){

this.setState({

[state + 'Loaded']: true

});

}

handleClick(state){

let node = this.refs[state];

this.setState({

[state]: node.crop()

});

}

render() {

return (

<div className="App">

<div className="App-header">

<img src={logo} className="App-logo" alt="logo" />

<h2>Welcome to React</h2>

</div>

// 여기부터 cropper component 사용한 부분

<h3>Default image crop</h3>

<Cropper src={testImage} ref="image" onImgLoad={() => this.handleImageLoaded('image')}/>

<br/>

{this.state.imageLoaded ? <button onClick={() => this.handleClick('image')}>crop</button> : null}

<h4>after crop</h4>

{this.state.image ? <img src={this.state.image} alt=""/> : null}

</div>

);

}

}

생성자에서 state를 생성하여, crop된 image를 저장하는 부분과 , 이미지 로드가 되어있는지 아닌지에 대해 저장하는 부분을 작성하도록 합니다.

handleImageLoaded는 이미지가 로드되면 state.imageLoaded를 true로 바꿔줍니다.

handleClick은 클릭시  만약 이미지가 로드되어 있다면, 크롭 이미지를 저장합니다.

저장하고, yarn start 혹은 npm start로 실행하여 확인하여 보시기 바랍니다.