animism-align/frontend/app/common/imageCrop.component.js


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

import React, { Component } from 'react'
import { cropImage } from 'app/utils'

export default class ImageCrop extends Component {
  state = {
    cropURL: null
  }

  componentDidMount() {
    const { url, crop } = this.props
    this.crop(url, crop)
  }

  componentDidUpdate(prevProps) {
    const { url, crop } = this.props
    if (this.props.crop !== prevProps.crop) {
      cropImage(url, crop).then(canvas =>{
        const cropURL = canvas.toDataURL('image/jpeg', 0.8)
        this.setState({ cropURL })
      })
    }
  }

  crop(url, crop) {
    cropImage(url, crop).then(canvas =>{
      const cropURL = canvas.toDataURL('image/jpeg', 0.8)
      this.setState({ cropURL })
    })
  }


  render() {
    const { cropURL } = this.state
    if (!cropURL) {
      return null
    }
    return (
      <img src={cropURL} className='preview' />
    )
  }
}