react截圖組件react-cropper的使用方法

在使用React開發中我們經常會遇到上傳圖片的情況，如果要使的上傳的圖片符合一定的規格，那么便要在客戶端對上傳的圖片進行一定的裁剪，這個時候我么便可以使用到

react-cropper這個圖片裁剪組件，可以幫助我們輕松的實現圖片裁剪功能。使用步驟如下：

1. 安裝：

   npm install --save-dev react-cropper

    

2. 使用方法如下：

   import React from 'react'
   import Cropper from 'react-cropper'
   import 'cropperjs/dist/cropper.css'
   import {Button} from 'antd'
   
   export default class Crop extends React.Component {
       constructor() {
           super();
           this.cropImage = this.cropImage.bind(this);
       }
   
       cropImage() {
           if (this.cropper.getCroppedCanvas() === 'null') {
               return false
           }
           this.props.getCropData(this.cropper.getCroppedCanvas().toDataURL())
       }
   
       render() {
           return (
               <div>
                   <div style={{width: '100%'}}>
                       <Cropper
                           src={this.props.src}
                           ref={cropper => {
                               this.cropper = cropper;
                           }}
                           style={{height: 400, width: '100%'}}
                           aspectRatio={246/346}
                           guides={false}
                       />
                   </div>
                   <div>
                       <Button type="primary" size="large" onClick={this.cropImage} style={{marginTop: '10px'}}>
                           確認裁剪
                       </Button>
                   </div>
               </div>
           );
       }
   }

import Cropper from 'react-cropper'
import 'cropperjs/dist/cropper.css'

這兩句分別引入Cropper組件和它的樣式，Cropper組件還有一些常用的屬性：

1. src：src是要裁剪的圖片的src，一般是上層組件讀取到的圖片的Base64編碼
2. aspectRatio：這是控制裁剪后的圖片的比例

裁剪框底部還有一個按鈕來確認是否裁剪，從上面我們可以看到其綁定的事件：

cropImage() {
        if (this.cropper.getCroppedCanvas() === 'null') { return false } this.props.getCropData(this.cropper.getCroppedCanvas().toDataURL()) }

this.cropper使我們使用的react的ref屬性保存的Cropper組件的DOM節點的引用，不清楚的可以去看React官方文檔，這個組件提供了一個getCroppedCanvas()方法，這個方法返回的是裁剪得到的圖片，我們可以使用

toDataURL()方法將其轉化為Base64編碼上傳到上一級的組件。