react-cropper实现头像裁剪

react-cropper实现头像裁剪

1. 简单封装

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

class UserCropper extends React.Component {
   
  constructor(props) {
   
    super(props)
  }

  confirm = () => {
    // 确认生成
    return this.cropper.getCroppedCanvas().toDataURL()
  }
  toBlob = name => {
    // 转换为blob，以便上传
    const code = this.confirm()
    return this.base64ToBlob(code, name)
  }

  /**
   * base64转blob
   * @param {String} code base64数据
   * @param {String} name 文件名
   * @return {blob}
   */
  base64ToBlob(code, name) {
   
    let parts = code.split(';base64,')
    let contentType = parts[0].split(':')[1]
    let raw = window.atob(parts[1])
    let rawLength = raw.length
    let uInt8Array = new Uint8Array(rawLength)
    for (let i = 0; i < rawLength; ++i) {
   
      uInt8Array[i] = raw.charCodeAt(i)
    }
    return new window