npm install cropic

Cropic.js

移动端 h5 头像裁剪工具

此插件是根据微信头像裁剪进行演变，基于Clipic插件进行修改、更新

用手机访问此页面体验：https://tuao525.github.io/cropic/

或者用手机扫此二维码进入

!avatar

npm 方式

bath

$ npm install cropic





在 vue 项目里使用

html

// xxx.vue





在 react 项目里使用

tsx

import React, { useState } from 'react'

import Cropic from 'cropic'



export default () => {

  const [src, setSrc] = useState('')



  const cropBtn = (event) => {

    const cropic = new Cropic()

    const files = event?.target.files

    const reader = new FileReader()

    reader.readAsDataURL(files[0])

    reader.onload = (img) => {

      cropic.getImage({

        // width: 500,

        // height: 500,

        src: img?.target?.result,

        name: 'cropic',

        encode: 'base64', // 支持 base64、blob、file

        type: 'png',

        // quality: '0.9', // 导出图片的质量

        // buttonText: ['Cancel', 'Reset', 'Done'],

        // buttonColor: ['#fff', '#3680fd', '#23c667'],

        // buttonSize: 12,

        onDone: (base64) => {

          setSrc(base64)

        },

        onCancel: function () {

          console.log('取消裁剪')

        }

      })

    }

  }

  return (

    

              src={src}

        style={{ width: '100px', height: '100px', borderRadius: '50%' }}

      />

      

    

  )

}





cdn 方式

html

参数说明

事件说明

| 事件 | 回调 | 说明 |
| :------- | :------------------- | :------- |
| onDone | 导出裁剪后的图片编码 | 完成裁剪 |
| onCancel | 无 | 取消裁剪 |