SunnyQjm/taro-cropper
1
0
Fork 0
mirror of https://github.com/SunnyQjm/taro-cropper.git synced 2026-06-03 08:16:46 +08:00
Code Issues Releases Wiki Activity

add: 更新文档

Browse Source
This commit is contained in:
SunnyQjm
2019-08-23 14:48:01 +08:00
parent e6db80cff8
commit b644b2f655
2 changed files with 28 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files
@types/taro-cropper.d.ts
Vendored
+2 -1
View File
@@ -1,7 +1,8 @@
import {ComponentClass} from "react"; import {ComponentClass} from "react";
export interface TaroCropperComponentProps { export interface TaroCropperComponentProps {
cropperCanvasId?: string, // 裁剪框画布id cropperCanvasId?: string, // 画布id
cropperCutCanvasId?: string, // 用于裁剪的canvas id
width?: number, // 组件宽度 width?: number, // 组件宽度
height?: number, // 组件高度 (要求背景高度大于宽度) height?: number, // 组件高度 (要求背景高度大于宽度)
cropperWidth?: number, // 裁剪框宽度 cropperWidth?: number, // 裁剪框宽度
README.md
+26 -15
View File
@@ -6,7 +6,7 @@
> >
> 项目地址: [https://github.com/SunnyQjm/taro-cropper](https://github.com/SunnyQjm/taro-cropper) > 项目地址: [https://github.com/SunnyQjm/taro-cropper](https://github.com/SunnyQjm/taro-cropper)
TaroCropper 是Taro小程序框架下使用的图片裁剪，基于canvasAPI进行实现，支持滑动和缩放，目前测试在微信小程序端可以正常使用。 TaroCropper 是Taro小程序框架下使用的图片裁剪，基于canvasAPI进行实现，支持滑动和缩放，目前测试在微信小程序端和H5端可以正常使用。
> ### 使用方式 > ### 使用方式
@@ -24,6 +24,16 @@ TaroCropper 是Taro小程序框架下使用的图片裁剪，基于canvasAPI进
} from 'taro-cropper'; } from 'taro-cropper';
``` ```
- 在项目配置文件 `config/index.js` 中添加如下配置
```javascript
h5: {
esnextModules: ['taro-cropper']
}
```
该配置的作用是，在H5端使用本库的时候，对应的单位会进行转换（`px` => `rem`）
- **在代码中使用** - **在代码中使用**
```typescript ```typescript
@@ -41,20 +51,21 @@ TaroCropper 是Taro小程序框架下使用的图片裁剪，基于canvasAPI进
> ### 参数说明 > ### 参数说明
| 参数名 | 参数类型 | 参数说明 | 默认值 | | 参数名 | 参数类型 | 参数说明 | 默认值 |
| :-------------: | :----------------------------: | :----------------------------------------------------------: | --------------------- | | :----------------: | :----------------------------: | :----------------------------------------------------------: | --------------------- |
| cropperCanvasId | string | 用于绘制的Canvas的id | TaroCropperCanvasId | | cropperCanvasId | string | 用于绘制的Canvas的id | cropperCanvasId |
| width | number | 整个控件的宽度（单位为rpx） | 750（即充满屏幕宽度） | | cropperCutCanvasId | string | 用于裁剪的Canvas的id | cropperCutCanvasId |
| height | number | 整个控件的高度（单位为rpx） | 1200 | | width | number | 整个控件的宽度（单位为rpx） | 750（即充满屏幕宽度） |
| cropperWidth | number | 裁剪框的宽度（单位为rpx） | 400 | | height | number | 整个控件的高度（单位为rpx） | 1200 |
| cropperHeight | number | 裁剪框的高度（单位为rpx） | 400 | | cropperWidth | number | 裁剪框的宽度（单位为rpx） | 400 |
| themeColor | string | 主题色（裁剪框四角的颜色以及底部完成按钮的颜色） | #0f0（绿色） | | cropperHeight | number | 裁剪框的高度（单位为rpx） | 400 |
| maxScale | number | 最大放大倍数（maxScale > 1） | 3 | | themeColor | string | 主题色（裁剪框四角的颜色以及底部完成按钮的颜色） | #0f0（绿色） |
| fullScreen | boolean | 控件是否充满全屏 | false | | maxScale | number | 最大放大倍数（maxScale > 1） | 3 |
| src | string | 待裁剪的图片的路径 | ‘’ | | fullScreen | boolean | 控件是否充满全屏 | false |
| hideFinishText | boolean | 是否隐藏底部的完成按钮 | false | | src | string | 待裁剪的图片的路径 | ‘’ |
| onCut | (cutImagePath: string) => void | 点击底部完成按钮时会执行裁剪操作，可以通过此回调接收裁剪结果 | () => {} | | hideFinishText | boolean | 是否隐藏底部的完成按钮 | false |
| onFail | (err) => void | 裁剪失败的回调 | () => {} | | onCut | (cutImagePath: string) => void | 点击底部完成按钮时会执行裁剪操作，可以通过此回调接收裁剪结果 | () => {} |
| onFail | (err) => void | 裁剪失败的回调 | () => {} |
> ### 效果展示 > ### 效果展示