diff --git a/@types/taro-cropper.d.ts b/@types/taro-cropper.d.ts index 45b48ff..a1e6cbc 100644 --- a/@types/taro-cropper.d.ts +++ b/@types/taro-cropper.d.ts @@ -1,7 +1,8 @@ import {ComponentClass} from "react"; export interface TaroCropperComponentProps { - cropperCanvasId?: string, // 裁剪框画布id + cropperCanvasId?: string, // 画布id + cropperCutCanvasId?: string, // 用于裁剪的canvas id width?: number, // 组件宽度 height?: number, // 组件高度 (要求背景高度大于宽度) cropperWidth?: number, // 裁剪框宽度 diff --git a/README.md b/README.md index 7c67f26..cfdb3b5 100644 --- a/README.md +++ b/README.md @@ -6,7 +6,7 @@ > > 项目地址: [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'; ``` +- 在项目配置文件 `config/index.js` 中添加如下配置 + + ```javascript + h5: { + esnextModules: ['taro-cropper'] + } + ``` + + 该配置的作用是,在H5端使用本库的时候,对应的单位会进行转换(`px` => `rem`) + - **在代码中使用** ```typescript @@ -41,20 +51,21 @@ TaroCropper 是Taro小程序框架下使用的图片裁剪,基于canvasAPI进 > ### 参数说明 -| 参数名 | 参数类型 | 参数说明 | 默认值 | -| :-------------: | :----------------------------: | :----------------------------------------------------------: | --------------------- | -| cropperCanvasId | string | 用于绘制的Canvas的id | TaroCropperCanvasId | -| width | number | 整个控件的宽度(单位为rpx) | 750(即充满屏幕宽度) | -| height | number | 整个控件的高度(单位为rpx) | 1200 | -| cropperWidth | number | 裁剪框的宽度(单位为rpx) | 400 | -| cropperHeight | number | 裁剪框的高度(单位为rpx) | 400 | -| themeColor | string | 主题色(裁剪框四角的颜色以及底部完成按钮的颜色) | #0f0(绿色) | -| maxScale | number | 最大放大倍数(maxScale > 1) | 3 | -| fullScreen | boolean | 控件是否充满全屏 | false | -| src | string | 待裁剪的图片的路径 | ‘’ | -| hideFinishText | boolean | 是否隐藏底部的完成按钮 | false | -| onCut | (cutImagePath: string) => void | 点击底部完成按钮时会执行裁剪操作,可以通过此回调接收裁剪结果 | () => {} | -| onFail | (err) => void | 裁剪失败的回调 | () => {} | +| 参数名 | 参数类型 | 参数说明 | 默认值 | +| :----------------: | :----------------------------: | :----------------------------------------------------------: | --------------------- | +| cropperCanvasId | string | 用于绘制的Canvas的id | cropperCanvasId | +| cropperCutCanvasId | string | 用于裁剪的Canvas的id | cropperCutCanvasId | +| width | number | 整个控件的宽度(单位为rpx) | 750(即充满屏幕宽度) | +| height | number | 整个控件的高度(单位为rpx) | 1200 | +| cropperWidth | number | 裁剪框的宽度(单位为rpx) | 400 | +| cropperHeight | number | 裁剪框的高度(单位为rpx) | 400 | +| themeColor | string | 主题色(裁剪框四角的颜色以及底部完成按钮的颜色) | #0f0(绿色) | +| maxScale | number | 最大放大倍数(maxScale > 1) | 3 | +| fullScreen | boolean | 控件是否充满全屏 | false | +| src | string | 待裁剪的图片的路径 | ‘’ | +| hideFinishText | boolean | 是否隐藏底部的完成按钮 | false | +| onCut | (cutImagePath: string) => void | 点击底部完成按钮时会执行裁剪操作,可以通过此回调接收裁剪结果 | () => {} | +| onFail | (err) => void | 裁剪失败的回调 | () => {} | > ### 效果展示