add: 支持裁剪图片导出

src/components/taro-cropper/index.tsx

@@ -6,7 +6,6 @@ import {ITouch, ITouchEvent} from "@tarojs/components/types/common";
 
 
 interface TaroCropperComponentProps {
-  bgCanvasId: string,       // 背景画布id
   cropperCanvasId: string,  // 裁剪框画布id
   width: number,            // 组件宽度
   height: number,           // 组件高度   (要求背景高度大于宽度)
@@ -26,13 +25,11 @@ class TaroCropperComponent extends Taro.PureComponent<TaroCropperComponentProps,
     height: 1200,
     cropperWidth: 300,
     cropperHeight: 300,
-    bgCanvasId: 'TaroBgCanvasId',
     cropperCanvasId: 'TaroCropperCanvasId',
     src: '',
   };
 
   systemInfo: getSystemInfoSync.Return;
-  bgCanvasContext: CanvasContext;
   cropperCanvasContext: CanvasContext;
 
   constructor(props) {
@@ -108,9 +105,7 @@ class TaroCropperComponent extends Taro.PureComponent<TaroCropperComponentProps,
   componentDidMount(): void {
     const {
       cropperCanvasId,
-      bgCanvasId
     } = this.props;
-    this.bgCanvasContext = Taro.createCanvasContext(bgCanvasId, this);
     this.cropperCanvasContext = Taro.createCanvasContext(cropperCanvasId, this);
     this.updateInfo(this.props)
       .then(() => {
@@ -369,6 +364,40 @@ class TaroCropperComponent extends Taro.PureComponent<TaroCropperComponentProps,
   }
 
 
+  /**
+   * 将当前裁剪框区域的图片导出
+   */
+  cut(): Promise<{
+    errMsg: string,
+    tempFilePath: string,
+  }> {
+    const {
+      cropperCanvasId
+    } = this.props;
+    return new Promise((resolve, reject) => {
+      const cropperStartX = (this.width - this.cropperWidth) / 2;
+      const cropperStartY = (this.height - this.cropperHeight) / 2;
+      Taro.canvasToTempFilePath({
+        canvasId: cropperCanvasId,
+        x: cropperStartX,
+        y: cropperStartY,
+        width: this.cropperWidth,
+        height: this.cropperHeight,
+        destWidth: 2 * this.cropperWidth,
+        destHeight: 2 * this.cropperHeight,
+        success: res => {
+          resolve(res);
+        },
+        fail: err => {
+          reject(err);
+        },
+        complete: () => {
+        }
+      }, this.$scope);
+    });
+  }
+
+
   render(): any {
     const {
       width,

src/pages/index/index.tsx

@@ -1,5 +1,5 @@
 import Taro, {Component, Config} from '@tarojs/taro'
-import {View, Button} from '@tarojs/components'
+import {View, Button, Image} from '@tarojs/components'
 import './index.scss'
 import TaroCropper from '../../components/taro-cropper';
 
@@ -9,6 +9,7 @@ interface IndexProps {
 
 interface IndexState {
   src: string,
+  cutImagePath: string,
 }
 
 export default class Index extends Component<IndexProps, IndexState> {
@@ -27,32 +28,23 @@ export default class Index extends Component<IndexProps, IndexState> {
   constructor(props) {
     super(props);
     this.state = {
-      src: ''
+      src: '',
+      cutImagePath: '',
     }
   }
 
-  componentWillMount() {
-  }
-
-  componentDidMount() {
-  }
-
-  componentWillUnmount() {
-  }
-
-  componentDidShow() {
-  }
-
-  componentDidHide() {
-  }
+  taroCropper: TaroCropper;
 
   render() {
     const {
-      src
+      src,
+      cutImagePath
     } = this.state;
     return (
       <View className='index'>
-        <TaroCropper height={1000} src={src} cropperWidth={400} cropperHeight={400}/>
+        <TaroCropper height={1000} src={src} cropperWidth={400} cropperHeight={400} ref={(node: TaroCropper) => {
+          this.taroCropper = node;
+        }}/>
         <Button onClick={() => {
           Taro.chooseImage()
             .then(res => {
@@ -61,6 +53,24 @@ export default class Index extends Component<IndexProps, IndexState> {
               });
             })
         }}>选择图片</Button>
+        <Button onClick={() => {
+          this.taroCropper && this.taroCropper.cut()
+            .then(res => {
+              this.setState({
+                cutImagePath: res.tempFilePath
+              });
+              console.log(res);
+            })
+            .catch(err => {
+              console.log(err);
+            })
+        }}>
+          裁剪
+        </Button>
+        <Image
+          src={cutImagePath}
+          mode='aspectFit'
+        />
       </View>
     )
   }