fix: 🐛 修复 ImgCropper 在钉钉小程序平台无法展示所选图片的问题

Moonofweisheng · Feb 29, 2024 · db8d029 · db8d029
1 parent 3785215
commit db8d029
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 9 deletions.
diff --git a/src/pages/imgCropper/Index.vue b/src/pages/imgCropper/Index.vue
@@ -1,7 +1,7 @@
 <!--
  * @Author: weisheng
  * @Date: 2023-09-20 11:10:41
- * @LastEditTime: 2023-11-20 18:35:28
+ * @LastEditTime: 2024-02-29 13:17:27
  * @LastEditors: weisheng
  * @Description: 
  * @FilePath: \wot-design-uni\src\pages\imgCropper\Index.vue
@@ -14,7 +14,6 @@
     <!-- #endif -->
     <demo-block title="基本用法" style="text-align: center">
       <wd-img-cropper
-        id="wd-img-cropper"
         v-model="show"
         :img-src="src"
         @confirm="handleConfirm"

diff --git a/src/uni_modules/wot-design-uni/components/wd-img-cropper/wd-img-cropper.vue b/src/uni_modules/wot-design-uni/components/wd-img-cropper/wd-img-cropper.vue
@@ -1,6 +1,6 @@
 <template>
   <!-- 绘制的图片canvas -->
-  <view id="wd-img-cropper" v-if="modelValue" :class="`wd-img-cropper ${customClass}`" @touchmove="preventTouchMove">
+  <view v-if="modelValue" :class="`wd-img-cropper ${customClass}`" @touchmove="preventTouchMove">
     <!-- 展示在用户面前的裁剪框 -->
     <view class="wd-img-cropper__wrapper">
       <!-- 画出裁剪框 -->
@@ -146,6 +146,10 @@ const props = withDefaults(defineProps<Props>(), {
 const imgAngle = ref<number>(0)
 // 是否开启动画
 const isAnimation = ref<boolean>(false)
+// #ifdef MP-ALIPAY || APP-PLUS
+// hack 避免钉钉小程序、支付宝小程序、app抛出相关异常
+const animation: any = null
+// #endif
 
 // 裁剪框的宽高
 const picWidth = ref<number>(0)
@@ -588,12 +592,12 @@ function canvasToImage() {
         fileType,
         quality,
         canvasId: 'wd-img-cropper-canvas',
-        success: (res) => {
-          emit('confirm', {
-            tempFilePath: res.tempFilePath,
-            width: cutWidth.value * exportScale,
-            height: cutHeight.value * exportScale
-          })
+        success: (res: any) => {
+          const result = { tempFilePath: res.tempFilePath, width: cutWidth.value * exportScale, height: cutHeight.value * exportScale }
+          // #ifdef MP-DINGTALK
+          result.tempFilePath = res.filePath
+          // #endif
+          emit('confirm', result)
         },
         complete: () => {
           emit('update:modelValue', false)