taro-cropper
項(xiàng)目地址: https://github.com/SunnyQjm/taro-cropper
TaroCropper 是Taro小程序框架下使用的圖片裁剪，基于canvasAPI進(jìn)行實(shí)現(xiàn)，支持滑動(dòng)和縮放，目前測(cè)試在微信小程序端, QQ小程序端, 支付寶小程序端, 字節(jié)跳動(dòng)小程序端, 百度小程序端和H5端可以正常使用。
使用方式
-
首先用npm安裝
npm install --save taro-cropper -
引入組件庫(kù)
import { TaroCropper } from 'taro-cropper'; -
在項(xiàng)目配置文件
config/index.js中添加如下配置h5: { esnextModules: ['taro-cropper'] }該配置的作用是，在H5端使用本庫(kù)的時(shí)候，對(duì)應(yīng)的單位會(huì)進(jìn)行轉(zhuǎn)換（
px=>rem） -
在代碼中使用
<TaroCropper fullScreen onCut={res => { this.setState({ cutImagePath: res }) }} />具體的使用實(shí)例參考taro-cropper-demo
參數(shù)說(shuō)明
| 參數(shù)名 | 參數(shù)類型 | 參數(shù)說(shuō)明 | 默認(rèn)值 |
|---|---|---|---|
| cropperCanvasId | string | 用于繪制的Canvas的id | cropperCanvasId |
| cropperCutCanvasId | string | 用于裁剪的Canvas的id | cropperCutCanvasId |
| width | number | 整個(gè)控件的寬度（單位為rpx） | 750（即充滿屏幕寬度） |
| height | number | 整個(gè)控件的高度（單位為rpx） | 1200 |
| cropperWidth | number | 裁剪框的寬度（單位為rpx） | 400 |
| cropperHeight | number | 裁剪框的高度（單位為rpx） | 400 |
| themeColor | string | 主題色（裁剪框四角的顏色以及底部完成按鈕的顏色） | #0f0（綠色） |
| maxScale | number | 最大放大倍數(shù)（maxScale > 1） | 3 |
| fullScreen | boolean | 控件是否充滿全屏 | false |
| src | string | 待裁剪的圖片的路徑 | ‘’ |
| hideFinishText | boolean | 是否隱藏底部的完成按鈕 | false |
| onCut | (cutImagePath: string) => void | 點(diǎn)擊底部完成按鈕時(shí)會(huì)執(zhí)行裁剪操作，可以通過(guò)此回調(diào)接收裁剪結(jié)果 | () => {} |
| onFail | (err) => void | 裁剪失敗的回調(diào) | () => {} |
| hideCancelText | boolean | 是否隱藏取消按鈕 | true |
| onCancel | () => void | 點(diǎn)擊取消按鈕的回調(diào) | () => {} |
| finishText | string | 完成按鈕文字 | 完成 |
| cancelText | string | 取消按鈕文字 | 取消 |
| fileType | 'jpg' | 'png' | string | 裁剪后導(dǎo)出的圖片的格式，只支持 'jpg' 或 'png' | 'jpg' |
| quality | number | 導(dǎo)出圖片的質(zhì)量，取值為 0 ~ 1（1表示質(zhì)量最高） | 1 |
效果展示
demo
