feat: 分享好友封面图自动裁切;

pages_order/components/autoCrop.vue

@@ -0,0 +1,111 @@
+<template>
+  <view style="position: fixed; top: 100vh;">
+    <image :src="imageUrl" @load="crop" @error="afterLoadImg" />  
+    <canvas class="canvas" canvas-id="canvas" style="width: 500px; height: 400px;"></canvas>
+  </view>
+</template>
+
+<script>
+import utils from '@/utils/utils.js'
+
+export default {
+  data() {
+    return {
+      imageUrl: null,
+    }
+  },
+  methods: {
+    afterLoadImg() {
+      uni.hideLoading()
+    },
+    cutImgShare(imgUrl, w, h, that) {
+      console.log('--imgUrl', imgUrl)
+      return new Promise((resolve, reject) => {
+        uni.getImageInfo({
+          src: imgUrl,
+          success(res) {
+            try {
+
+              const context = uni.createCanvasContext('canvas', that);
+              console.log('--context', context)
+              let sWidth = w
+              let sHeight = h
+              let sx = 0
+              let sy = 0;
+              let dWidth = 500
+              let dHeight = 400
+
+              console.log('--w', w, '--h', h)
+
+              if (w <= h) {
+                sHeight = Math.floor(sWidth / 5 * 4);
+                sy = Math.floor((h - sHeight) / 2)
+              } else {
+                sWidth = Math.floor(sHeight / 4 * 5);
+                sx = Math.floor((w - sWidth) / 2)
+              }
+              
+              console.log('--sx', sx, '--sy', sy, '--sWidth', sWidth, '--sHeight', sHeight)
+              context.drawImage(res.path, sx, sy, sWidth, sHeight, 0, 0, dWidth, dHeight);
+
+              context.draw(true, setTimeout(() => {
+                uni.canvasToTempFilePath({
+                  canvasId: 'canvas',
+                  fileType: 'jpg',
+                  success: (res) => {
+                    console.log(res.tempFilePath)
+                    resolve(res.tempFilePath);
+                  },
+                  fail(err) {
+                    console.log(err);
+                    reject(err)
+                  }
+                }, that);
+              }, 200));
+
+            } catch (err) {
+              reject(err)
+            }
+
+          },
+          fail(err) {
+            console.log('获取图片信息失败', err);
+            reject(err)
+          }
+        });
+      });
+    },
+    set(imageUrl) {
+      console.log('--set', imageUrl)
+      this.imageUrl = imageUrl
+      uni.showLoading({
+        title: '上传中...'
+      })
+    },
+    async crop(e) {
+      
+      console.log('--crop', e)
+      let that = this
+
+      try {
+        const { width, height } = e.target
+        let fileUrl = await this.cutImgShare(this.imageUrl, width, height, that)
+        
+        this.$Oss.ossUpload(fileUrl).then(url => {
+          console.log('--shareImg', url)
+          this.$emit('change', url)
+        })
+      } catch (err) {
+        console.log('--err', err)
+        this.$emit('change', this.imageUrl)
+      }
+
+      this.afterLoadImg()
+    },
+  },
+}
+</script>
+
+<style>
+
+</style>

pages_order/record/articleSharing.vue

@@ -109,9 +109,11 @@
       发布
     </button>
     <!-- 不是 审核中 或 已发布 -> 即 创建分享 或 审核不通过 -->
-    <button v-else-if="![0,1].includes(status)" class="button-submit" @click="onSubmit">
+    <button v-else-if="![0,1].includes(status)" class="button-submit" @click="preSubmit">
       提交审核
     </button>
+
+    <autoCrop ref="autoCropRef" @change="onSubmit"></autoCrop>
   </view>
 </template>
 
@@ -122,6 +124,7 @@
   import formNumberBox from '../components/formNumberBox.vue'
   import formUpload from '../components/formUpload.vue'
   import formTextarea from '../components/formTextarea.vue'
+  import autoCrop from '../components/autoCrop.vue'
 
 	export default {
     components: {
@@ -129,6 +132,7 @@
       formNumberBox,
       formUpload,
       formTextarea,
+      autoCrop,
     },
 		data() {
       return {
@@ -319,7 +323,15 @@
           
         }
       },
-      async onSubmit() {
+      async preSubmit() {
+        try {
+          await this.$refs.form.validate()
+          this.$refs.autoCropRef.set(this.form.headImage)
+        } catch (err) {
+          
+        }
+      },
+      async onSubmit(headImage) {
         try {
 
           await this.$refs.form.validate()
@@ -327,7 +339,6 @@
           const textDetails = (await this.getEditorContents())?.html
 
           const {
-            headImage,
             headTitle,
             num,
             wxCodeImage,

pages_order/record/groupSharing.vue

@@ -124,9 +124,11 @@
       发布
     </button>
     <!-- 不是 审核中 或 已发布 -> 即 创建分享 或 审核不通过 -->
-    <button v-else-if="![0,1].includes(status)" class="button-submit" @click="onSubmit">
+    <button v-else-if="![0,1].includes(status)" class="button-submit" @click="preSubmit">
       提交审核
     </button>
+
+    <autoCrop ref="autoCropRef" @change="onSubmit"></autoCrop>
   </view>
 </template>
 
@@ -137,6 +139,7 @@
   import formNumberBox from '../components/formNumberBox.vue'
   import formUpload from '../components/formUpload.vue'
   import formTextarea from '../components/formTextarea.vue'
+  import autoCrop from '../components/autoCrop.vue'
 
 	export default {
     components: {
@@ -144,6 +147,7 @@
       formNumberBox,
       formUpload,
       formTextarea,
+      autoCrop,
     },
 		data() {
       return {
@@ -281,7 +285,15 @@
           
         }
       },
-      async onSubmit() {
+      async preSubmit() {
+        try {
+          await this.$refs.form.validate()
+          this.$refs.autoCropRef.set(this.form.indexImage)
+        } catch (err) {
+          
+        }
+      },
+      async onSubmit(indexImage) {
         try {
 
           await this.$refs.form.validate()
@@ -289,7 +301,6 @@
           const {
             headImage,
             headTitle,
-            indexImage,
             memberNum,
             num,
             wxCodeImage,

pages_order/record/personalSharing.vue

@@ -117,9 +117,11 @@
       发布
     </button>
     <!-- 不是 审核中 或 已发布 -> 即 创建分享 或 审核不通过 -->
-    <button v-else-if="![0,1].includes(status)" class="button-submit" @click="onSubmit">
+    <button v-else-if="![0,1].includes(status)" class="button-submit" @click="preSubmit">
       提交审核
     </button>
+
+    <autoCrop ref="autoCropRef" @change="onSubmit"></autoCrop>
   </view>
 </template>
 
@@ -130,6 +132,7 @@
   import formNumberBox from '../components/formNumberBox.vue'
   import formUpload from '../components/formUpload.vue'
   import formTextarea from '../components/formTextarea.vue'
+  import autoCrop from '../components/autoCrop.vue'
 
 	export default {
     components: {
@@ -137,6 +140,7 @@
       formNumberBox,
       formUpload,
       formTextarea,
+      autoCrop,
     },
 		data() {
       return {
@@ -267,11 +271,20 @@
             textDetails,
           }
           this.status = status
+
         } catch (err) {
           
         }
       },
-      async onSubmit() {
+      async preSubmit() {
+        try {
+          await this.$refs.form.validate()
+          this.$refs.autoCropRef.set(this.form.indexImage)
+        } catch (err) {
+          
+        }
+      },
+      async onSubmit(indexImage) {
         try {
 
           await this.$refs.form.validate()
@@ -279,7 +292,6 @@
           const {
             headImage,
             headTitle,
-            indexImage,
             num,
             wxCodeImage,
             textDetails,

pages_order/record/videoSharing.vue

@@ -113,18 +113,22 @@
       发布
     </button>
     <!-- 不是 审核中 或 已发布 -> 即 创建分享 或 审核不通过 -->
-    <button v-else-if="![0,1].includes(status)" class="button-submit" @click="onSubmit">
+    <button v-else-if="![0,1].includes(status)" class="button-submit" @click="preSubmit">
       提交审核
     </button>
+
+    <autoCrop ref="autoCropRef" @change="onSubmit"></autoCrop>
   </view>
 </template>
 
 <script>
   import { mapState } from 'vuex'
+
   import formUpload from '../components/formUpload.vue'
   import formInput from '../components/formInput.vue'
   import formNumberBox from '../components/formNumberBox.vue'
   import formTextarea from '../components/formTextarea.vue'
+  import autoCrop from '../components/autoCrop.vue'
 
 	export default {
     components: {
@@ -132,6 +136,7 @@
       formInput,
       formNumberBox,
       formTextarea,
+      autoCrop,
     },
 		data() {
       return {
@@ -270,14 +275,21 @@
           
         }
       },
-      async onSubmit() {
+      async preSubmit() {
+        try {
+          await this.$refs.form.validate()
+          this.$refs.autoCropRef.set(this.form.indexImage)
+        } catch (err) {
+          
+        }
+      },
+      async onSubmit(indexImage) {
         try {
 
           await this.$refs.form.validate()
 
           const {
           headTitle,
-          indexImage,
           vio,
           timeNum,
           num,