From e8f322ac0e3a5f7bb0aaf275d25861125acb53fb Mon Sep 17 00:00:00 2001 From: SunnyQjm Date: Sun, 18 Aug 2019 10:15:03 +0800 Subject: [PATCH] =?UTF-8?q?add:=20=E6=B7=BB=E5=8A=A0=E5=AE=8C=E6=88=90?= =?UTF-8?q?=E6=8C=89=E9=92=AE=EF=BC=8C=E6=B7=BB=E5=8A=A0=E8=A3=81=E5=89=AA?= =?UTF-8?q?=E5=9B=9E=E8=B0=83?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- @types/taro-cropper.d.ts | 20 ++++---- package.json | 2 +- project.config.json | 4 +- src/components/taro-cropper/index.scss | 3 -- src/components/taro-cropper/index.tsx | 69 ++++++++++++++++++-------- src/pages/index/index.tsx | 5 ++ 6 files changed, 66 insertions(+), 37 deletions(-) diff --git a/@types/taro-cropper.d.ts b/@types/taro-cropper.d.ts index 22284db..a5936ef 100644 --- a/@types/taro-cropper.d.ts +++ b/@types/taro-cropper.d.ts @@ -1,15 +1,17 @@ import {ComponentClass} from "react"; export interface TaroCropperComponentProps { - cropperCanvasId?: string, // 裁剪框画布id - width?: number, // 组件宽度 - height?: number, // 组件高度 (要求背景高度大于宽度) - cropperWidth?: number, // 裁剪框宽度 - cropperHeight?: number, // 裁剪框高度 - themeColor?: string, // 主题色（裁剪框的四个角的绘制颜色） - maxScale?: number, // 最大放大倍数，maxScale >= 1 - fullScreen?: boolean, // 组件充满全屏，此时width和height设置无效 - src: string, // 要裁剪的图片路径 + cropperCanvasId?: string, // 裁剪框画布id + width?: number, // 组件宽度 + height?: number, // 组件高度 (要求背景高度大于宽度) + cropperWidth?: number, // 裁剪框宽度 + cropperHeight?: number, // 裁剪框高度 + themeColor?: string, // 主题色（裁剪框的四个角的绘制颜色） + maxScale?: number, // 最大放大倍数，maxScale >= 1 + fullScreen?: boolean, // 组件充满全屏，此时width和height设置无效 + src: string, // 要裁剪的图片路径, + onCut?: (src: string) => void, // 点击底部的完成按钮，执行裁剪，成功则触发该回调 + onFail?: (err) => void, // 裁剪失败触发该回调 } declare const TaroCropper: ComponentClass; diff --git a/package.json b/package.json index 00bd396..0f63e30 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "taro-cropper", - "version": "1.0.0", + "version": "1.0.1", "private": false, "description": "Taro框架下的图片裁剪组件封装，开箱即用", "main": "dist/index.js", diff --git a/project.config.json b/project.config.json index ec00a1f..327f938 100644 --- a/project.config.json +++ b/project.config.json @@ -2,7 +2,7 @@ "miniprogramRoot": "dist/", "projectname": "taro-cropper", "description": "we-cropper在Taro框架下的封装，开箱即用", - "appid": "wx47e69a70a727989c", + "appid": "touristappid", "setting": { "urlCheck": true, "es6": false, @@ -13,4 +13,4 @@ "simulatorType": "wechat", "simulatorPluginLibVersion": {}, "condition": {} -} \ No newline at end of file +} diff --git a/src/components/taro-cropper/index.scss b/src/components/taro-cropper/index.scss index 9e8c5da..e69de29 100644 --- a/src/components/taro-cropper/index.scss +++ b/src/components/taro-cropper/index.scss @@ -1,3 +0,0 @@ -.taro-cropper-component { - position: relative; -} diff --git a/src/components/taro-cropper/index.tsx b/src/components/taro-cropper/index.tsx index 774df3e..fb16e8c 100644 --- a/src/components/taro-cropper/index.tsx +++ b/src/components/taro-cropper/index.tsx @@ -1,5 +1,5 @@ import Taro, {CanvasContext, getImageInfo, getSystemInfoSync} from '@tarojs/taro'; -import {Canvas, View} from '@tarojs/components'; +import {Canvas, CoverView} from '@tarojs/components'; import './index.scss'; import {ITouch, ITouchEvent} from "@tarojs/components/types/common"; @@ -7,15 +7,17 @@ import {CSSProperties} from "react"; interface TaroCropperComponentProps { - cropperCanvasId: string, // 裁剪框画布id - width: number, // 组件宽度 - height: number, // 组件高度 (要求背景高度大于宽度) - cropperWidth: number, // 裁剪框宽度 - cropperHeight: number, // 裁剪框高度 - themeColor: string, // 主题色（裁剪框的四个角的绘制颜色） - maxScale: number, // 最大放大倍数，maxScale >= 1 - fullScreen: boolean, // 组件充满全屏，此时width和height设置无效 - src: string, // 要裁剪的图片路径 + cropperCanvasId: string, // 裁剪框画布id + width: number, // 组件宽度 + height: number, // 组件高度 (要求背景高度大于宽度) + cropperWidth: number, // 裁剪框宽度 + cropperHeight: number, // 裁剪框高度 + themeColor: string, // 主题色（裁剪框的四个角的绘制颜色） + maxScale: number, // 最大放大倍数，maxScale >= 1 + fullScreen: boolean, // 组件充满全屏，此时width和height设置无效 + src: string, // 要裁剪的图片路径, + onCut: (src: string) => void, // 点击底部的完成按钮，执行裁剪，成功则触发该回调 + onFail: (err) => void, // 裁剪失败触发该回调 } interface TaroCropperComponentState { @@ -34,6 +36,8 @@ class TaroCropperComponent extends Taro.PureComponent {}, + onFail: () => {} }; systemInfo: getSystemInfoSync.Return; @@ -418,12 +422,13 @@ class TaroCropperComponent extends Taro.PureComponent - - + + { + this.cut() + .then(res => { + this.props.onCut && this.props.onCut(res.tempFilePath); + }) + .catch(err => { + this.props.onFail && this.props.onFail(err); + }) + }} + > + 完成 + + ); } } diff --git a/src/pages/index/index.tsx b/src/pages/index/index.tsx index 6ad1b44..5615b5e 100644 --- a/src/pages/index/index.tsx +++ b/src/pages/index/index.tsx @@ -54,6 +54,11 @@ export default class Index extends Component { ref={this.catTaroCropper} themeColor={'#f00'} fullScreen + onCut={res => { + this.setState({ + cutImagePath: res + }) + }} />