feat: 头像裁剪 AvatarCropper 支持裁剪圆形

src/packages/__VUE/avatarcropper/demo.vue

@@ -8,6 +8,14 @@
         </nut-avatar>
       </nut-avatar-cropper>
     </nut-cell>
+    <h2>裁剪圆形形状</h2>
+    <nut-cell>
+      <nut-avatar-cropper cut-shape="round" @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">

src/packages/__VUE/avatarcropper/doc.en-US.md

@@ -41,6 +41,31 @@ const cutImage = (url) => {
 
 :::
 
+### Cut round shape
+
+:::demo
+
+```vue
+<template>
+  <nut-avatar-cropper cut-shape="round" @confirm="cutImage">
+    <nut-avatar size="large">
+      <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>
+```
+
+:::
+
 ### Clipping region toolbar slots
 
 Customize the clipping area toolbar, and toolbar-position controls the toolbar position
@@ -97,6 +122,7 @@ const cutImage = (url) => {
 | edit-text | The text content in the middle | string | 编辑 |
 | cancel-text | Cancel button text | string | 取消 |
 | cancel-confirm | Confirm button text | string | 确认 |
+| cut-shape | Cut round shape The optional value is：`square` `round` | string | square |
 
 ### AvatarCropper Slots
 

src/packages/__VUE/avatarcropper/doc.md

@@ -41,6 +41,31 @@ const cutImage = (url) => {
 
 :::
 
+### 裁剪圆形形状
+
+:::demo
+
+```vue
+<template>
+  <nut-avatar-cropper cut-shape="round" @confirm="cutImage">
+    <nut-avatar size="large">
+      <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控制工具栏位置
@@ -97,6 +122,7 @@ const cutImage = (url) => {
 | edit-text | 中间的文字内容 | string | 编辑 |
 | cancel-text | 取消按钮的文字 | string | 取消 |
 | cancel-confirm | 确认按钮的文字 | string | 确认 |
+| cut-shape | 裁剪形状,可选值为：`square` `round` | string | square |
 
 ### AvatarCropper Slots
 

src/packages/__VUE/avatarcropper/index.scss

@@ -93,6 +93,9 @@
       z-index: 1;
       background-color: transparent;
       box-shadow: 0 0 1000px 1000px rgba(0, 0, 0, 0.6);
+      &-round {
+        border-radius: 50%;
+      }
     }
   }
 }

src/packages/__VUE/avatarcropper/index.vue

@@ -18,7 +18,7 @@
       @touchend="onTouchEnd"
       @touchcancel="onTouchEnd"
     >
-      <div class="highlight" :style="highlightStyle"></div>
+      <div class="highlight" :class="{ 'highlight-round': cutShape === 'round' }" :style="highlightStyle"></div>
     </div>
     <div class="nut-cropper-popup__toolbar" :class="[toolbarPosition]">
       <slot v-if="$slots.toolbar" name="toolbar"></slot>
@@ -44,7 +44,7 @@
 import { watch, ref, reactive, toRefs, computed, Ref, PropType } from 'vue';
 import NutButton from '../button/index.vue';
 import { createComponent } from '@/packages/utils/create';
-import type { AvatarCropperToolbarPosition } from './types';
+import type { AvatarCropperToolbarPosition, CutShapeType } from './types';
 const { create } = createComponent('avatar-cropper');
 import { Refresh2, Retweet } from '@nutui/icons-vue';
 import { useTouch } from '@/packages/utils/useTouch';
@@ -80,6 +80,10 @@
     confirmText: {
       type: String,
       default: '确定'
+    },
+    cutShape: {
+      type: String as PropType<CutShapeType>,
+      default: 'square'
     }
   },
   emits: ['confirm', 'cancel'],
@@ -380,6 +384,18 @@
       // 设置新canvas的大小与裁剪区域相同
       croppedCanvas.width = width;
       croppedCanvas.height = height;
+
+      // 裁剪形状为圆形
+      if (props.cutShape === 'round') {
+        const circle = {
+          x: width / 2,
+          y: height / 2,
+          r: width / 2
+        };
+        croppedCtx.arc(circle.x, circle.y, circle.r, 0, Math.PI * 2, false);
+        croppedCtx.clip();
+      }
+
       // 使用drawImage方法将原canvas中指定区域的内容绘制到新canvas上
       canvas && croppedCtx.drawImage(canvas, sx, sy, width, height, 0, 0, width, height);
 

src/packages/__VUE/avatarcropper/types.ts

@@ -1,3 +1,4 @@
 export type AvatarCropperToolbarPosition = 'top' | 'bottom';
 export type AvatarCropperSizeType = 'original' | 'compressed';
 export type AvatarCropperSourceType = 'album' | 'camera';
+export type CutShapeType = 'square' | 'round';