update: 自动裁切正方形

java-mall-app-shop-admin/components/poiuy-uImgUpload/imgUpload.vue

@@ -88,6 +88,13 @@
     >
       {{ tipObj.prompt }}
     </view>
+
+    <!-- 用于裁剪的canvas，默认隐藏 -->
+    <canvas
+      canvas-id="cropperCanvas"
+      class="cropper-canvas"
+      :style="{ width: canvasWidth + 'px', height: canvasHeight + 'px' }"
+    ></canvas>
   </view>
 </template>
 
@@ -167,7 +174,7 @@ export default {
     pressImg: {
       //压缩图片 H5暂不支持压缩api
       type: Number,
-      default: -1,
+      default: 75,
     },
     config: {
       type: Object,
@@ -207,6 +214,11 @@ export default {
       headers: {},
       curPlatform: "",
       currIndex: null,
+
+      croppedImageUrl: "", // 裁剪后的图片地址
+      canvasWidth: 0, // canvas宽度
+      canvasHeight: 0, // canvas高度
+      tempImagePath: "", // 临时图片路径
     };
   },
   created() {
@@ -251,6 +263,88 @@ export default {
     },
   },
   methods: {
+    // 处理图片：获取信息并裁剪
+    processImage(tempImagePath) {
+      return new Promise((reolse, reject) => {
+        uni.getImageInfo({
+          src: tempImagePath,
+          success: (imageInfo) => {
+            // 计算裁剪参数
+            const { width, height } = imageInfo;
+            // 确定正方形的边长（取宽高中的较小值）
+            const sideLength = Math.min(width, height);
+
+            // 计算裁剪的起始坐标，确保居中裁剪，完整显示商品
+            const x = (width - sideLength) / 2;
+            const y = (height - sideLength) / 2;
+
+            // 设置canvas尺寸为正方形边长
+            this.canvasWidth = sideLength;
+            this.canvasHeight = sideLength;
+
+            // 绘制到canvas进行裁剪
+            const ctx = uni.createCanvasContext("cropperCanvas", this);
+
+            // 清除画布
+            ctx.clearRect(0, 0, sideLength, sideLength);
+
+            // 绘制图片并裁剪
+            ctx.drawImage(
+              tempImagePath,
+              x,
+              y,
+              sideLength,
+              sideLength, // 源图像裁剪区域
+              0,
+              0,
+              sideLength,
+              sideLength // 目标画布绘制区域
+            );
+
+            // 执行绘制
+            ctx.draw(false, () => {
+              // 从canvas获取裁剪后的图片
+              uni.canvasToTempFilePath(
+                {
+                  canvasId: "cropperCanvas",
+                  width: sideLength,
+                  height: sideLength,
+                  destWidth: sideLength,
+                  destHeight: sideLength,
+                  quality: 0.9,
+                  success: (res) => {
+                    // this.croppedImageUrl = res.tempFilePath;
+                    reolse(res.tempFilePath);
+                    // uni.showToast({
+                    //   title: "图片处理完成",
+                    //   icon: "success",
+                    // });
+                  },
+                  fail: (err) => {
+                    reject(err);
+                    console.error("canvas转图片失败：", err);
+                    // uni.showToast({
+                    //   title: "图片处理失败",
+                    //   icon: "none",
+                    // });
+                  },
+                },
+                this
+              );
+            });
+          },
+          fail: (err) => {
+            reject(err);
+            console.error("获取图片信息失败：", err);
+            // uni.showToast({
+            //   title: "获取图片信息失败",
+            //   icon: "none",
+            // });
+          },
+        });
+      });
+    },
+
     upPhoto() {
       let that = this;
       if (!that.url) {
@@ -275,8 +369,8 @@ export default {
             uni.chooseImage({
               count: Number(that.canUpCount),
               sizeType: ["original", "compressed"], //可以指定是原图还是压缩图，默认二者都有
-              sourceType: ["camera"], //从相册选择
+              sourceType: ["camera"], //拍照上传
-              success: function (res) {
+              success: async function (res) {
                 if (res) {
                   if (res.tempFiles) {
                     for (let item of res.tempFiles) {
@@ -303,7 +397,13 @@ export default {
                     }
                   }
                   that.currIndex = that.imgArray.length;
-                  that.imgArray = [...that.imgArray, ...res.tempFilePaths];
+                   //#ifdef H5
+                  let tempUrl = res.tempFilePaths[0];
+                  //#endif
+                  //#ifdef APP-PLUS
+                  let tempUrl = await that.processImage(res.tempFilePaths[0]);
+                  //#endif
+                  that.imgArray = [...that.imgArray, tempUrl];
                   that.changeImgArr(false);
                   if (that.pressImg >= 0) {
                     //存在图片压缩 开启图片压缩
@@ -323,7 +423,7 @@ export default {
               count: Number(that.canUpCount),
               sizeType: ["original", "compressed"], //可以指定是原图还是压缩图，默认二者都有
               sourceType: ["album"], //从相册选择
-              success: function (res) {
+              success: async function (res) {
                 if (res) {
                   if (res.tempFiles) {
                     for (let item of res.tempFiles) {
@@ -350,7 +450,14 @@ export default {
                     }
                   }
                   that.currIndex = that.imgArray.length;
-                  that.imgArray = [...that.imgArray, ...res.tempFilePaths];
+                  //#ifdef H5
+                  let tempUrl = res.tempFilePaths[0];
+                  //#endif
+                  //#ifdef APP-PLUS
+                  let tempUrl = await that.processImage(res.tempFilePaths[0]);
+                  //#endif
+
+                  that.imgArray = [...that.imgArray, tempUrl];
                   that.changeImgArr(false);
                   if (that.pressImg >= 0) {
                     //存在图片压缩 开启图片压缩
@@ -418,7 +525,7 @@ export default {
         uni.compressImage({
           src: item.url,
           quality: _this.pressImg,
-          success: (res) => {
+          success: async (res) => {
             ++success;
             item.pressUrl = res.tempFilePath;
           },
@@ -498,8 +605,8 @@ export default {
               //成功情况下
               _this.imgArray[i].result = true;
               res.code = 0;
-              _this.imgArray[i].url = res.data.url; //这里
+              _this.imgArray[i].url = res?.data?.url || ''; //这里
-              callback(res.data.url);
+              callback(res?.data?.url || '');
             } else {
               _this.imgArray[i].result = false;
               _this.tipObj.prompt = "上传失败，请检查！";
@@ -947,4 +1054,12 @@ export default {
   transform: translateX(0%);
   opacity: 1;
 }
+
+/* 隐藏canvas，仅用于后台处理 */
+.cropper-canvas {
+  position: absolute;
+  left: -999999px;
+  top: -999999px;
+  z-index: -1;
+}
 </style>