From df410b1f4fa87b93de060e4554446fc0d5710224 Mon Sep 17 00:00:00 2001
From: Marvin <454846659@qq.com>
Date: Sat, 23 Sep 2023 02:48:35 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=A4=B4=E5=83=8F=E8=A3=81=E5=89=AA?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6-taro=E7=89=88=E6=9C=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../project.private.config.json               |   9 +-
 .../pages/avatarcropper/index.config.ts       |   3 +
 .../business/pages/avatarcropper/index.vue    |  50 ++
 src/config.json                               |   4 +-
 .../__VUE/avatarcropper/canvas-util.ts        |  99 +++
 src/packages/__VUE/avatarcropper/doc.taro.md  | 121 +++-
 src/packages/__VUE/avatarcropper/index.scss   |  14 +-
 .../__VUE/avatarcropper/index.taro.vue        | 612 ++++++++++++++++++
 src/packages/__VUE/avatarcropper/types.ts     |   2 +
 9 files changed, 907 insertions(+), 7 deletions(-)
 create mode 100644 packages/nutui-taro-demo/src/business/pages/avatarcropper/index.config.ts
 create mode 100644 packages/nutui-taro-demo/src/business/pages/avatarcropper/index.vue
 create mode 100644 src/packages/__VUE/avatarcropper/canvas-util.ts
 create mode 100644 src/packages/__VUE/avatarcropper/index.taro.vue

diff --git a/packages/nutui-taro-demo/project.private.config.json b/packages/nutui-taro-demo/project.private.config.json
index 79196e4582a..976aa25cb8f 100644
--- a/packages/nutui-taro-demo/project.private.config.json
+++ b/packages/nutui-taro-demo/project.private.config.json
@@ -6,6 +6,13 @@
   "condition": {
     "miniprogram": {
       "list": [
+        {
+          "name": "AvatarCropper",
+          "pathName": "business/pages/avatarcropper/index",
+          "query": "",
+          "launchMode": "default",
+          "scene": null
+        },
         {
           "name": "exhibition/pages/imagepreview/index",
           "pathName": "exhibition/pages/imagepreview/index",
@@ -65,4 +72,4 @@
   },
   "projectname": "vue4.x",
   "libVersion": "2.27.1"
-}
+}
\ No newline at end of file
diff --git a/packages/nutui-taro-demo/src/business/pages/avatarcropper/index.config.ts b/packages/nutui-taro-demo/src/business/pages/avatarcropper/index.config.ts
new file mode 100644
index 00000000000..7c77e2da510
--- /dev/null
+++ b/packages/nutui-taro-demo/src/business/pages/avatarcropper/index.config.ts
@@ -0,0 +1,3 @@
+export default {
+  navigationBarTitleText: 'AvatarCropper'
+};
diff --git a/packages/nutui-taro-demo/src/business/pages/avatarcropper/index.vue b/packages/nutui-taro-demo/src/business/pages/avatarcropper/index.vue
new file mode 100644
index 00000000000..3e19c2ec0a5
--- /dev/null
+++ b/packages/nutui-taro-demo/src/business/pages/avatarcropper/index.vue
@@ -0,0 +1,50 @@
+<template>
+  <div class="demo barrage-demo" :class="{ web: env === 'WEB' }">
+    <Header v-if="env === 'WEB'" />
+    <h2>基础用法</h2>
+    <nut-cell>
+      <nut-avatar-cropper @confirm="cutImage">
+        <nut-avatar size="large">
+          <img :src="imageUrl" />
+        </nut-avatar>
+      </nut-avatar-cropper>
+    </nut-cell>
+    <h2>裁剪区域toolbar插槽</h2>
+    <nut-cell>
+      <nut-avatar-cropper ref="avatarCropperRef" toolbar-position="top" edit-text="修改" @confirm="cutImage">
+        <nut-avatar size="large">
+          <img :src="imageUrl" />
+        </nut-avatar>
+        <template #toolbar>
+          <div class="toolbar">
+            <nut-button type="primary" @click="avatarCropperRef.cancel()">取消</nut-button>
+            <nut-button type="primary" @click="avatarCropperRef.reset()">重置</nut-button>
+            <nut-button type="primary" @click="avatarCropperRef.rotate()">旋转</nut-button>
+            <nut-button type="primary" @click="avatarCropperRef.confirm()">确认</nut-button>
+          </div>
+        </template>
+      </nut-avatar-cropper>
+    </nut-cell>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+import Taro from '@tarojs/taro';
+import Header from '../../../components/header.vue';
+const env = Taro.getEnv();
+const imageUrl = ref(
+  'https://img12.360buyimg.com/imagetools/jfs/t1/196430/38/8105/14329/60c806a4Ed506298a/e6de9fb7b8490f38.png'
+);
+const avatarCropperRef = ref();
+const cutImage = (url: string) => {
+  imageUrl.value = url;
+};
+</script>
+
+<style>
+.toolbar {
+  display: flex;
+  justify-content: space-between;
+}
+</style>
diff --git a/src/config.json b/src/config.json
index c651332f03f..b44e73dd956 100644
--- a/src/config.json
+++ b/src/config.json
@@ -1309,9 +1309,7 @@
           "show": true,
           "cName": "头像裁剪",
           "desc": "仿微信头像裁剪功能",
-          "taro": false,
-          "exportEmpty": false,
-          "exportEmptyTaro": false,
+          "taro": true,
           "author": "Marvin"
         }
       ]
diff --git a/src/packages/__VUE/avatarcropper/canvas-util.ts b/src/packages/__VUE/avatarcropper/canvas-util.ts
new file mode 100644
index 00000000000..36c36cc9cf7
--- /dev/null
+++ b/src/packages/__VUE/avatarcropper/canvas-util.ts
@@ -0,0 +1,99 @@
+import Taro from '@tarojs/taro';
+import CanvasContext = Taro.CanvasContext;
+
+const compareVersion = (v1Old: string, v2Old: string) => {
+  let v1 = v1Old.split('.');
+  let v2 = v2Old.split('.');
+  const len = Math.max(v1.length, v2.length);
+
+  while (v1.length < len) {
+    v1.push('0');
+  }
+  while (v2.length < len) {
+    v2.push('0');
+  }
+
+  for (let i = 0; i < len; i++) {
+    const num1 = parseInt(v1[i]);
+    const num2 = parseInt(v2[i]);
+
+    if (num1 > num2) {
+      return 1;
+    } else if (num1 < num2) {
+      return -1;
+    }
+  }
+
+  return 0;
+};
+
+const isWeapp = () => {
+  return process.env.TARO_ENV === 'weapp';
+};
+
+//////////////////////////////////////////////////////////////////////////////////
+//////// 微信小程序自1.9.90起废除若干个CanvasContext的函数，改为属性，以下为兼容代码
+//////////////////////////////////////////////////////////////////////////////////
+
+function _easyCanvasContextBase(
+  systemInfo: any,
+  lowCallback: () => void,
+  highCallback: () => void,
+  targetVersion: string = '1.9.90'
+) {
+  if (isWeapp() && compareVersion(systemInfo.SDKVersion, targetVersion) >= 0) {
+    highCallback();
+  } else {
+    lowCallback();
+  }
+}
+/**
+ *
+ * 基础库 1.9.90 开始支持，低版本需做兼容处理。填充颜色。用法同 CanvasContext.setFillStyle()。
+ * @param systemInfo
+ * @param canvasContext
+ * @param color
+ */
+function easySetStrokeStyle(systemInfo: any, canvasContext: CanvasContext, color: string | CanvasGradient) {
+  _easyCanvasContextBase(
+    systemInfo,
+    () => {
+      canvasContext.setStrokeStyle(color);
+      console.log('???');
+    },
+    () => {
+      if (typeof color === 'string') {
+        canvasContext.strokeStyle = color;
+      }
+      console.log('2333');
+    }
+  );
+}
+
+function easySetLineWidth(systemInfo: any, canvasContext: CanvasContext, lineWidth: number) {
+  _easyCanvasContextBase(
+    systemInfo,
+    () => {
+      canvasContext.setLineWidth(lineWidth);
+    },
+    () => {
+      canvasContext.lineWidth = lineWidth;
+    }
+  );
+}
+
+function easySetFillStyle(systemInfo: any, canvasContext: CanvasContext, color: string | CanvasGradient) {
+  _easyCanvasContextBase(
+    systemInfo,
+    () => {
+      canvasContext.setFillStyle(color);
+    },
+    () => {
+      if (typeof color === 'string') {
+        canvasContext.fillStyle = color;
+      }
+    }
+  );
+}
+
+export { easySetStrokeStyle, easySetLineWidth, easySetFillStyle };
diff --git a/src/packages/__VUE/avatarcropper/doc.taro.md b/src/packages/__VUE/avatarcropper/doc.taro.md
index 49ca132ad57..d5e2efb89ba 100644
--- a/src/packages/__VUE/avatarcropper/doc.taro.md
+++ b/src/packages/__VUE/avatarcropper/doc.taro.md
@@ -2,4 +2,123 @@
 
 ### 介绍
 
-后续再进行开发
+用来对头像进行剪切生成一张新的图片。
+
+### 安装
+
+```js
+import { createApp } from 'vue';
+import { AvatarCropper } from '@nutui/nutui';
+
+const app = createApp();
+app.use(AvatarCropper);
+```
+
+### 基础用法
+
+中间直接使用avatar组件，裁剪后图片内容会被替换为新的。
+
+:::demo
+
+```vue
+<template>
+  <nut-avatar-cropper>
+    <nut-avatar size="large" @confirm="cutImage">
+      <img :src="imageUrl" />
+    </nut-avatar>
+  </nut-avatar-cropper>
+</template>
+<script setup>
+import { ref } from 'vue';
+const imageUrl = ref(
+  'https://img12.360buyimg.com/imagetools/jfs/t1/196430/38/8105/14329/60c806a4Ed506298a/e6de9fb7b8490f38.png'
+);
+const cutImage = (url) => {
+  imageUrl.value = url;
+};
+</script>
+```
+
+:::
+
+### 裁剪区域toolbar插槽
+
+自定义裁剪区域工具栏，toolbar-position控制工具栏位置
+
+:::demo
+
+```vue
+<template>
+  <nut-avatar-cropper ref="avatarCropperRef" toolbar-position="top" edit-text="修改" @confirm="cutImage">
+    <nut-avatar size="large">
+      <img :src="imageUrl" />
+    </nut-avatar>
+    <template #toolbar>
+      <div class="toolbar">
+        <nut-button type="primary" @click="avatarCropperRef.cancel()">取消</nut-button>
+        <nut-button type="primary" @click="avatarCropperRef.reset()">重置</nut-button>
+        <nut-button type="primary" @click="avatarCropperRef.rotate()">旋转</nut-button>
+        <nut-button type="primary" @click="avatarCropperRef.confirm()">确认</nut-button>
+      </div>
+    </template>
+  </nut-avatar-cropper>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+const imageUrl = ref(
+  'https://img12.360buyimg.com/imagetools/jfs/t1/196430/38/8105/14329/60c806a4Ed506298a/e6de9fb7b8490f38.png'
+);
+const avatarCropperRef = ref();
+const cutImage = (url) => {
+  imageUrl.value = url;
+};
+</script>
+
+<style>
+.toolbar {
+  display: flex;
+  justify-content: space-between;
+}
+</style>
+```
+
+:::
+
+## API
+
+### AvatarCropper Props
+
+| 参数             | 说明                                               | 类型   | 默认值                     |
+| ---------------- | -------------------------------------------------- | ------ | -------------------------- |
+| max-zoom         | 最大缩放倍数                                       | number | 3                          |
+| space            | 裁剪区域两边预留的间隙                             | number | 10                         |
+| toolbar-position | 裁剪区域工具栏位置,可选值为：`top` `bottom`        | string | bottom                     |
+| edit-text        | 中间的文字内容                                     | string | 编辑                       |
+| cancel-text      | 取消按钮的文字                                     | string | 取消                       |
+| cancel-confirm   | 确认按钮的文字                                     | string | 确认                       |
+| size-type        | 所选的图片的尺寸： 可选值：`original` `compressed` | Array  | ['original', 'compressed'] |
+| source-type      | 选择图片的来源： 可选值：`album` `camera`          | Array  | ['album', 'camera']        |
+
+### AvatarCropper Slots
+
+| 名称    | 描述                                                        |
+| ------- | ----------------------------------------------------------- |
+| default | 默认插槽，可放置图片、图标、文本等元素                      |
+| toolbar | 选择文件后裁剪弹窗底部元素可以自定义，通过ref调用组件的方法 |
+
+### AvatarCropper Events
+
+| 名称    | 描述               | 回调参数           |
+| ------- | ------------------ | ------------------ |
+| confirm | 裁剪后点击确认触发 | url:裁剪后的base64 |
+| cancel  | 点击取消触发       | -                  |
+
+### AvatarCropper Ref
+
+| 事件名  | 说明      |
+| ------- | --------- |
+| cancel  | 取消裁剪  |
+| reset   | 重置为0度 |
+| rotate  | 旋转90度  |
+| confirm | 确定裁剪  |
diff --git a/src/packages/__VUE/avatarcropper/index.scss b/src/packages/__VUE/avatarcropper/index.scss
index 2564505ce82..016984a48eb 100644
--- a/src/packages/__VUE/avatarcropper/index.scss
+++ b/src/packages/__VUE/avatarcropper/index.scss
@@ -1,6 +1,7 @@
 .nut-avatar-cropper {
   position: relative;
-  &::after {
+  &::after,
+  &__edit-text {
     content: attr(data-edit-text);
     position: absolute;
     top: 0;
@@ -14,6 +15,11 @@
     justify-content: center;
     align-items: center;
   }
+  &.taro {
+    &::after {
+      content: none;
+    }
+  }
   &__input {
     position: absolute;
     top: 0;
@@ -34,7 +40,8 @@
   height: 100%;
   background: var(--nut-overlay-bg-color, rgba(0, 0, 0, 0.7));
   z-index: 1000;
-  &__canvas {
+  &__canvas,
+  &__cut-canvas {
     position: absolute;
     bottom: 0;
     left: 0;
@@ -42,6 +49,9 @@
     height: 100%;
     z-index: 1;
   }
+  &__cut-canvas {
+    z-index: 0;
+  }
   &__toolbar {
     position: absolute;
     bottom: 0;
diff --git a/src/packages/__VUE/avatarcropper/index.taro.vue b/src/packages/__VUE/avatarcropper/index.taro.vue
new file mode 100644
index 00000000000..46d0011d289
--- /dev/null
+++ b/src/packages/__VUE/avatarcropper/index.taro.vue
@@ -0,0 +1,612 @@
+<template>
+  <view class="nut-avatar-cropper taro">
+    <slot></slot>
+    <view class="nut-avatar-cropper__edit-text" @click.stop="chooseImage">{{ editText }}</view>
+  </view>
+  <view v-show="visible" class="nut-cropper-popup">
+    <canvas :id="canvasId" :canvas-id="canvasId" :style="canvasStyle" class="nut-cropper-popup__canvas"></canvas>
+    <canvas
+      :id="cutCanvasId"
+      :canvas-id="cutCanvasId"
+      :style="cutCanvasStyle"
+      class="nut-cropper-popup__cut-canvas"
+    ></canvas>
+    <view
+      class="nut-cropper-popup__highlight"
+      @touchstart="onTouchStart"
+      @touchmove="onTouchMove"
+      @touchend="onTouchEnd"
+      @touchcancel="onTouchEnd"
+    >
+      <view class="highlight" :style="highlightStyle"></view>
+    </view>
+    <view class="nut-cropper-popup__toolbar" :class="[toolbarPosition]">
+      <slot v-if="$slots.toolbar" name="toolbar"></slot>
+      <view v-else class="flex-sb">
+        <view class="nut-cropper-popup__toolbar-item" @click="cancel()">
+          <nut-button type="danger">{{ cancelText }}</nut-button>
+        </view>
+        <view class="nut-cropper-popup__toolbar-item" @click="reset">
+          <IconFont name="refresh2" color="#fff" />
+        </view>
+        <view class="nut-cropper-popup__toolbar-item" @click="rotate">
+          <IconFont name="retweet" color="#fff" />
+        </view>
+        <view class="nut-cropper-popup__toolbar-item" @click="confirm">
+          <nut-button type="success">{{ confirmText }}</nut-button>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script lang="ts">
+import { watch, ref, reactive, toRefs, computed, PropType, onMounted } from 'vue';
+import Button from '../button/index.vue';
+import { createComponent } from '@/packages/utils/create';
+import type { AvatarCropperToolbarPosition } from './types';
+const { create } = createComponent('avatar-cropper');
+import { IconFont } from '@nutui/icons-vue-taro';
+import { useTouch } from '@/packages/utils/useTouch';
+import { preventDefault, clamp } from '@/packages/utils/util';
+import { AvatarCropperSizeType, AvatarCropperSourceType } from './types';
+import Taro from '@tarojs/taro';
+import { easySetFillStyle } from './canvas-util';
+
+export default create({
+  components: {
+    [Button.name]: Button,
+    IconFont
+  },
+  props: {
+    maxZoom: {
+      type: Number,
+      default: 3
+    },
+    space: {
+      type: Number,
+      default: 10
+    },
+    toolbarPosition: {
+      type: String as PropType<AvatarCropperToolbarPosition>,
+      default: 'bottom'
+    },
+    editText: {
+      type: String,
+      default: '编辑'
+    },
+    cancelText: {
+      type: String,
+      default: '取消'
+    },
+    confirmText: {
+      type: String,
+      default: '确定'
+    },
+    sizeType: {
+      type: Array as PropType<AvatarCropperSizeType[]>,
+      default: () => ['original', 'compressed']
+    },
+    sourceType: {
+      type: Array as PropType<AvatarCropperSourceType[]>,
+      default: () => ['album', 'camera']
+    }
+  },
+  emits: ['confirm', 'cancel'],
+  setup(props, { emit, expose }) {
+    const state = reactive({
+      visible: false,
+      defScale: 1,
+      scale: 1,
+      angle: 0,
+      moveX: 0,
+      moveY: 0,
+      moving: false,
+      zooming: false,
+      displayWidth: 0,
+      displayHeight: 0,
+      cropperWidth: 0,
+      cropperHeight: 0
+    });
+    interface DrawImage {
+      src: string | HTMLImageElement;
+      x: number;
+      y: number;
+      width: number;
+      height: number;
+    }
+    interface CanvasAll {
+      canvasId: string;
+      cutCanvasId: string;
+      cropperCanvasContext: Taro.CanvasContext | null;
+      cropperCutCanvasContext: Taro.CanvasContext | null;
+    }
+    const canvasAll = reactive<CanvasAll>({
+      canvasId: `canvas-${Date.now()}`,
+      cutCanvasId: `cut-canvas-${Date.now()}`,
+      cropperCanvasContext: null,
+      cropperCutCanvasContext: null
+    });
+    // 绘制图片
+    const drawImage = ref<DrawImage>({
+      src: '', // 规定要使用的图像
+      x: 0, // 在画布上x的坐标位置
+      y: 0, // 在画布上y的坐标位置
+      width: 0, // 要使用的图像的宽度
+      height: 0 // 要使用的图像的高度
+    });
+    // 触摸
+    const touch = useTouch();
+    // 获取系统信息
+    const systemInfo = Taro.getSystemInfoSync();
+    state.displayWidth = systemInfo.windowWidth;
+    state.displayHeight = systemInfo.windowHeight;
+    state.cropperWidth = state.cropperHeight = state.displayWidth - props.space * 2;
+
+    // 初始化canvas
+    onMounted(() => {
+      const { canvasId, cutCanvasId } = canvasAll;
+      canvasAll.cropperCanvasContext = Taro.createCanvasContext(canvasId);
+      canvasAll.cropperCutCanvasContext = Taro.createCanvasContext(cutCanvasId);
+    });
+    // 是否是横向
+    const isAngle = computed(() => {
+      return state.angle === 90 || state.angle === 270;
+    });
+
+    // 高亮框样式
+    const highlightStyle = computed(() => {
+      const { displayWidth } = state;
+      const width = displayWidth - props.space * 2 + 'px';
+      const height = width;
+      return {
+        width,
+        height
+      };
+    });
+
+    const canvasStyle = computed(() => {
+      const { displayWidth, displayHeight } = state;
+      return {
+        width: `${displayWidth}px`,
+        height: `${displayHeight}px`
+      };
+    });
+
+    const cutCanvasStyle = computed(() => {
+      const { displayWidth, displayHeight, cropperWidth } = state;
+      return {
+        top: `${(displayHeight - cropperWidth) / 2}px`,
+        left: `${(displayWidth - cropperWidth) / 2}px`,
+        width: `${cropperWidth}px`,
+        height: `${cropperWidth}px`
+      };
+    });
+
+    // 最大横向移动距离
+    const maxMoveX = computed(() => {
+      const { displayWidth, scale, cropperWidth } = state;
+      const { height } = drawImage.value;
+      if (isAngle.value) {
+        return Math.max(0, (height * scale - cropperWidth) / 2);
+      }
+      return Math.max(0, (displayWidth * scale - cropperWidth) / 2);
+    });
+
+    // 最大纵向移动距离
+    const maxMoveY = computed(() => {
+      const { displayWidth, scale, cropperWidth } = state;
+      const { height } = drawImage.value;
+      if (isAngle.value) {
+        return Math.max(0, (displayWidth * scale - cropperWidth) / 2);
+      }
+      return Math.max(0, (height * scale - cropperWidth) / 2);
+    });
+
+    // base64转图片
+    const dataURLToImage = (dataURL: string): Promise<HTMLImageElement> => {
+      return new Promise((resolve) => {
+        const img = new Image();
+        img.onload = () => resolve(img);
+        img.src = dataURL;
+      });
+    };
+
+    const webDraw = () => {
+      const { src, width, height, x, y } = drawImage.value;
+      const { moveX, moveY, scale, angle, displayWidth, displayHeight, cropperWidth } = state;
+      const canvasDom: HTMLElement | null = document.getElementById(canvasAll.canvasId);
+      let canvas: HTMLCanvasElement = canvasDom as HTMLCanvasElement;
+      if (canvasDom?.tagName !== 'CANVAS') {
+        canvas = canvasDom?.getElementsByTagName('canvas')[0] as HTMLCanvasElement;
+        canvas.width = displayWidth;
+        canvas.height = displayHeight;
+      }
+
+      const ctx = canvas.getContext('2d') as CanvasRenderingContext2D;
+      if (!ctx) return;
+      ctx.clearRect(0, 0, displayWidth, displayHeight);
+      ctx.fillStyle = '#666';
+      ctx.fillRect(0, 0, displayWidth, displayHeight);
+      ctx.fillStyle = '#000';
+      ctx.fillRect(props.space, (displayHeight - cropperWidth) / 2, cropperWidth, cropperWidth);
+
+      // 绘制偏移量
+      ctx.translate(displayWidth / 2 + moveX, displayHeight / 2 + moveY);
+      // 绘制旋转角度
+      ctx.rotate((Math.PI / 180) * angle);
+      // 绘制缩放
+      ctx.scale(scale, scale);
+      // 绘制图片
+      ctx.drawImage(src as HTMLImageElement, x, y, width, height);
+    };
+
+    // 绘制显示的canvas内容
+    const draw = () => {
+      if (Taro.getEnv() === 'WEB') {
+        webDraw();
+        return;
+      }
+      const { src, width, height, x, y } = drawImage.value;
+      const { moveX, moveY, scale, angle, displayWidth, displayHeight, cropperWidth } = state;
+      const { cropperCanvasContext } = canvasAll;
+      let ctx = cropperCanvasContext;
+      if (!ctx) return;
+      // 绘制背景
+      ctx.clearRect(0, 0, displayWidth, displayHeight);
+      easySetFillStyle(systemInfo, ctx, '#666');
+      ctx.fillRect(0, 0, displayWidth, displayHeight);
+      ctx.stroke();
+      ctx.fill();
+      easySetFillStyle(systemInfo, ctx, '#000');
+      ctx.fillRect(props.space, (displayHeight - cropperWidth) / 2, cropperWidth, cropperWidth);
+      ctx.stroke();
+      ctx.fill();
+
+      // 绘制偏移量
+      ctx.translate(displayWidth / 2 + moveX, displayHeight / 2 + moveY);
+      // 绘制旋转角度
+      ctx.rotate((Math.PI / 180) * angle);
+      // 绘制缩放
+      ctx.scale(scale, scale);
+      // 绘制图片
+      ctx.drawImage(src as string, x, y, width, height);
+      ctx.draw(false);
+    };
+
+    // 设置绘制图片
+    const setDrawImg = async (image: Taro.getImageInfo.SuccessCallbackResult) => {
+      const { displayWidth, cropperWidth } = state;
+
+      let drawImg = { ...drawImage.value };
+      const { width: imgWidth, height: imgHeight } = image;
+      drawImg.src = image.path;
+      if (Taro.getEnv() === 'WEB') {
+        drawImg.src = await dataURLToImage(image.path);
+      }
+
+      const isPortrait = imgHeight > imgWidth;
+      const rate = isPortrait ? imgWidth / imgHeight : imgHeight / imgWidth;
+
+      drawImg.width = displayWidth;
+      drawImg.height = isPortrait ? displayWidth / rate : displayWidth * rate;
+      drawImg.x = -drawImg.width / 2;
+      drawImg.y = -drawImg.height / 2;
+
+      drawImage.value = drawImg;
+
+      state.defScale = cropperWidth / (isPortrait ? drawImg.width : drawImg.height);
+      resetScale();
+      draw();
+    };
+
+    // 选择图片
+    const chooseImage = () => {
+      Taro.chooseImage({
+        count: 1,
+        // 可以指定是原图还是压缩图，默认二者都有
+        sizeType: props.sizeType,
+        sourceType: props.sourceType,
+        success: (res: Taro.chooseImage.SuccessCallbackResult) => {
+          // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
+          const { tempFiles } = res;
+          !!tempFiles.length && imageChange(tempFiles[0]);
+        }
+      });
+    };
+
+    interface TFileType {
+      size: number;
+      type?: string;
+      tempFilePath?: string;
+      path: string;
+    }
+
+    // 选择图片后回调
+    const imageChange = async (file: TFileType) => {
+      Taro.getImageInfo({
+        src: file.path
+      }).then((res: Taro.getImageInfo.SuccessCallbackResult) => {
+        state.visible = true;
+        setDrawImg(res);
+      });
+    };
+
+    // 重设缩放
+    const resetScale = () => {
+      setScale(state.defScale);
+      state.moveX = 0;
+      state.moveY = 0;
+      state.angle = 0;
+    };
+
+    // 设置缩放
+    const setScale = (scale: number) => {
+      scale = clamp(scale, +0.3, +props.maxZoom + 1);
+      if (scale !== state.scale) {
+        state.scale = scale;
+      }
+    };
+
+    // 计算两个点的距离
+    const getDistance = (touches: TouchList) =>
+      Math.sqrt((touches[0].clientX - touches[1].clientX) ** 2 + (touches[0].clientY - touches[1].clientY) ** 2);
+
+    let startMoveX: number;
+    let startMoveY: number;
+    let startScale: number;
+    let startDistance: number;
+    let fingerNum: number;
+
+    // 触摸开始
+    const onTouchStart = (event: TouchEvent) => {
+      const { touches } = event;
+      const { offsetX } = touch;
+
+      touch.start(event);
+
+      fingerNum = touches.length;
+      startMoveX = state.moveX;
+      startMoveY = state.moveY;
+
+      state.moving = fingerNum === 1;
+
+      state.zooming = fingerNum === 2 && !offsetX.value;
+      if (state.zooming) {
+        startScale = state.scale;
+        startDistance = getDistance(event.touches);
+      }
+    };
+
+    // 触摸移动
+    const onTouchMove = (event: TouchEvent) => {
+      const { touches } = event;
+
+      touch.move(event);
+
+      if (state.moving || state.zooming) {
+        preventDefault(event, true);
+      }
+
+      if (state.moving) {
+        const { deltaX, deltaY } = touch;
+        const moveX = deltaX.value * state.scale + startMoveX;
+        const moveY = deltaY.value * state.scale + startMoveY;
+
+        state.moveX = clamp(moveX, -maxMoveX.value, maxMoveX.value);
+        state.moveY = clamp(moveY, -maxMoveY.value, maxMoveY.value);
+      }
+
+      if (state.zooming && touches.length === 2) {
+        const distance = getDistance(touches);
+        const scale = (startScale * distance) / startDistance;
+
+        setScale(scale);
+      }
+    };
+
+    // 触摸结束
+    const onTouchEnd = (event: TouchEvent) => {
+      let stopPropagation = false;
+
+      if (state.moving || state.zooming) {
+        stopPropagation = !(state.moving && startMoveX === state.moveX && startMoveY === state.moveY);
+
+        if (!event.touches.length) {
+          if (state.zooming) {
+            state.moveX = clamp(state.moveX, -maxMoveX.value, maxMoveX.value);
+            state.moveY = clamp(state.moveY, -maxMoveY.value, maxMoveY.value);
+            state.zooming = false;
+          }
+
+          state.moving = false;
+          startMoveX = 0;
+          startMoveY = 0;
+          startScale = state.defScale;
+
+          if (state.scale < state.defScale) {
+            resetScale();
+          }
+
+          if (state.scale > props.maxZoom) {
+            state.scale = +props.maxZoom;
+          }
+        }
+      }
+
+      preventDefault(event, stopPropagation);
+
+      touch.reset();
+    };
+
+    // 重置角度
+    const reset = () => {
+      state.angle = 0;
+    };
+
+    // 设置角度
+    const rotate = () => {
+      if (state.angle === 270) {
+        state.angle = 0;
+        return;
+      }
+      state.angle += 90;
+    };
+
+    // 关闭
+    const cancel = (isEmit: Boolean = true) => {
+      state.visible = false;
+      resetScale();
+      isEmit && emit('cancel');
+    };
+
+    const confirmWEB = () => {
+      const { cropperWidth, displayHeight } = state;
+      const canvasDom: HTMLElement | null = document.getElementById(canvasAll.canvasId);
+      let canvas: HTMLCanvasElement = canvasDom as HTMLCanvasElement;
+      if (canvasDom?.tagName !== 'CANVAS') {
+        canvas = canvasDom?.getElementsByTagName('canvas')[0] as HTMLCanvasElement;
+      }
+      const width = cropperWidth;
+      const height = cropperWidth;
+      // 创建一个新的canvas元素，用于裁剪后的内容
+      const croppedCanvas = document.createElement('canvas');
+      const croppedCtx = croppedCanvas.getContext('2d') as CanvasRenderingContext2D;
+
+      // 设置新canvas的大小与裁剪区域相同
+      croppedCanvas.width = width;
+      croppedCanvas.height = height;
+      // 使用drawImage方法将原canvas中指定区域的内容绘制到新canvas上
+      canvas &&
+        croppedCtx.drawImage(
+          canvas,
+          props.space,
+          (displayHeight - cropperWidth) / 2,
+          width,
+          height,
+          0,
+          0,
+          width,
+          height
+        );
+
+      // 将裁剪后的内容转换为图片格式
+      const imageDataURL = croppedCanvas.toDataURL('image/png');
+      emit('confirm', imageDataURL);
+      cancel(false);
+    };
+
+    // 裁剪图片
+    const confirm = () => {
+      if (Taro.getEnv() === 'WEB') {
+        confirmWEB();
+        return;
+      }
+      const { pixelRatio } = systemInfo;
+      const { cropperWidth, displayWidth, displayHeight } = state;
+      const { cropperCutCanvasContext, canvasId, cutCanvasId } = canvasAll;
+      // 将编辑后的canvas内容转成图片
+      Taro.canvasToTempFilePath({
+        canvasId,
+        x: 0,
+        y: 0,
+        width: displayWidth,
+        height: displayHeight,
+        destWidth: displayWidth,
+        destHeight: displayHeight,
+        success: async (res: Taro.canvasToTempFilePath.SuccessCallbackResult) => {
+          let filePath = res.tempFilePath;
+          // 绘制裁剪的canvas内容
+          const ctx = cropperCutCanvasContext;
+          if (!ctx) return;
+          ctx.drawImage(
+            filePath,
+            props.space,
+            (displayHeight - cropperWidth) / 2,
+            cropperWidth,
+            cropperWidth,
+            0,
+            0,
+            cropperWidth,
+            cropperWidth
+          );
+          ctx.draw();
+          // 将裁剪的canvas内容转成图片
+          Taro.canvasToTempFilePath({
+            canvasId: cutCanvasId,
+            x: 0,
+            y: 0,
+            width: cropperWidth,
+            height: cropperWidth,
+            destWidth: cropperWidth * pixelRatio,
+            destHeight: cropperWidth * pixelRatio,
+            success: (res: Taro.canvasToTempFilePath.SuccessCallbackResult) => {
+              let filePath = res.tempFilePath;
+
+              emit('confirm', filePath);
+              cancel(false);
+            }
+          });
+        }
+      });
+    };
+
+    watch(
+      () => state.scale,
+      () => {
+        draw();
+      }
+    );
+
+    watch(
+      () => state.angle,
+      () => {
+        if (Math.abs(state.moveX) > maxMoveX.value) {
+          state.moveX = maxMoveX.value;
+        }
+        if (Math.abs(state.moveY) > maxMoveY.value) {
+          state.moveY = maxMoveY.value;
+        }
+        draw();
+      }
+    );
+
+    watch(
+      () => state.moveX,
+      () => {
+        draw();
+      }
+    );
+
+    watch(
+      () => state.moveY,
+      () => {
+        draw();
+      }
+    );
+
+    expose({
+      cancel,
+      reset,
+      rotate,
+      confirm
+    });
+
+    return {
+      ...toRefs(state),
+      ...toRefs(canvasAll),
+      highlightStyle,
+      canvasStyle,
+      cutCanvasStyle,
+      chooseImage,
+      reset,
+      rotate,
+      cancel,
+      confirm,
+      onTouchStart,
+      onTouchMove,
+      onTouchEnd
+    };
+  }
+});
+</script>
diff --git a/src/packages/__VUE/avatarcropper/types.ts b/src/packages/__VUE/avatarcropper/types.ts
index 47efbe1e5b6..155fcd07e8d 100644
--- a/src/packages/__VUE/avatarcropper/types.ts
+++ b/src/packages/__VUE/avatarcropper/types.ts
@@ -1 +1,3 @@
 export type AvatarCropperToolbarPosition = 'top' | 'bottom';
+export type AvatarCropperSizeType = 'original' | 'compressed';
+export type AvatarCropperSourceType = 'album' | 'camera';