feat:添加图片裁剪上传功能

.idea/inspectionProfiles/Project_Default.xml

-<component name="InspectionProjectProfileManager">
-  <profile version="1.0">
-    <option name="myName" value="Project Default" />
-    <inspection_tool class="Eslint" enabled="true" level="WARNING" enabled_by_default="true" />
-  </profile>
-</component>
\ No newline at end of file

src/api/business/goodsNew.js

@@ -23,3 +23,11 @@ export function saveImageBase64(params) {
     data: params
   })
 }
+
+export function saveCroppingRecord(params) {
+  return request({
+    url: '/item/saveCroppingRecord',
+    method: 'post',
+    data: params
+  })
+}

src/views/goods/components/CutEditImageDialog.vue

@@ -78,7 +78,7 @@
 </template>
 
 <script>
-import { VuePictureCut, VuePictureCutMask, VuePictureCutMenu } from 'vue-picture-cut'
+import { VuePictureCut, VuePictureCutMask, VuePictureCutMenu, createUtils } from 'vue-picture-cut'
 import SelectImageDialog from './selectImageDialog'
 import LamaImageDialog from './lamaImageDialog'
 
@@ -101,12 +101,13 @@ export default {
   },
   data() {
     return {
+      utils: null,
       pictureCut: null,
       // src: this.imageBase64,
       cutInfo: {
         initAngle: 0,
         maxPixel: 500,
-        encoderOptions: 0.8
+        encoderOptions: 1
       },
       mastInfo: {
         width: 1,
@@ -117,7 +118,7 @@ export default {
       menuInfo: {
         format: 'image/jpeg/png',
         maxPixel: 500,
-        encoderOptions: 0.8
+        encoderOptions: 1
       },
       showLamaImageDialog: false,
       imageBase64: '',
@@ -136,7 +137,7 @@ export default {
       if (this.imageBase64) {
         setTimeout(() => {
           this.pictureCut = this.$refs['pictureCut']
-          console.log('==7777777777==', this.pictureCut)
+          this.utils = createUtils(this.pictureCut)
         }, 1000)
       }
     },
@@ -148,11 +149,44 @@ export default {
     },
     // 裁剪图片结果
     cutChange(res) {
+      this.handleUploadParam()
       this.imageBase64 = ''
       this.$emit('cutEditSuccess', this.editImageUrl, res.base64)
       // console.log('=====blob', this.blob)
       console.log('=====base64', this.base64)
     },
+    /**
+     * 上传裁剪参数
+     */
+    handleUploadParam() {
+      const options = this.utils.getOptions()
+      // console.log('配置：', options)
+      if (options && options.img && options.img.showRect) {
+        const rectW = options.img.showRect.w // 展示图片宽
+        const rectH = options.img.showRect.h // 展示图片高
+        const rectX = options.img.showRect.x // 偏移量处理后x
+        const rectY = options.img.showRect.y // 偏移量处理后y
+        const offsetX = rectX + rectW / 2 // 偏移量x 正数右  负数左
+        const offsetY = rectY * 2 // 偏移量y 正数上  负数下
+
+        const { w, h } = options.mask
+        const obj = {
+
+          width: rectW,
+          height: rectH,
+          x: Math.ceil(rectW / 2 - w / 2 - offsetX),
+          y: Math.ceil(rectH / 2 - h / 2 - offsetY),
+          maskW: w,
+          maskH: h
+        }
+        const param = {
+          imageUrl: this.editImageUrl,
+          coordinate: JSON.stringify(obj)
+        }
+        // console.log('====params==', param)
+        this.$emit('uploadEditImage', param)
+      }
+    },
     handlerGetBase64(currentImageUrl, imgUrlBase64) {
       this.changeImageUrl = currentImageUrl
       if (imgUrlBase64) {

src/views/goods/components/CutImageDialog.vue

@@ -90,7 +90,7 @@
 </template>
 
 <script>
-import { VuePictureCut, VuePictureCutMask, VuePictureCutMenu } from 'vue-picture-cut'
+import { VuePictureCut, VuePictureCutMask, VuePictureCutMenu, createUtils } from 'vue-picture-cut'
 import SelectImageDialog from './selectImageDialog'
 
 export default {
@@ -112,20 +112,17 @@ export default {
     imageList: {
       type: Array,
       default: () => []
-    },
-    editImageUrl: {
-      type: String,
-      default: ''
     }
   },
   data() {
     return {
       pictureCut: null,
+      utils: null,
       // src: this.imageBase64,
       cutInfo: {
         initAngle: 0,
         maxPixel: 500,
-        encoderOptions: 0.8
+        encoderOptions: 1
       },
       mastInfo: {
         width: 1,
@@ -136,11 +133,12 @@ export default {
       menuInfo: {
         format: 'image/jpeg/png',
         maxPixel: 500,
-        encoderOptions: 0.8
+        encoderOptions: 1
       },
       selectImageDialogVisible: false,
       selectType: 0,
-      imageBase64: ''
+      imageBase64: '',
+      currentImageUrl: ''
     }
   },
   watch: {
@@ -155,6 +153,7 @@ export default {
       if (this.imageBase64) {
         setTimeout(() => {
           this.pictureCut = this.$refs['pictureCut']
+          this.utils = createUtils(this.pictureCut)
           console.log('==7777777777==', this.pictureCut)
         }, 1000)
       }
@@ -184,13 +183,44 @@ export default {
     },
     // 裁剪图片结果
     cutChange(res) {
+      this.handleUploadParam()
       this.imageBase64 = ''
       this.$emit('cutSuccess', this.imageType, res)
       // console.log('=====blob', this.blob)
       console.log('=====base64', this.base64)
     },
+
+    handleUploadParam() {
+      const options = this.utils.getOptions()
+      // console.log('配置：', options)
+      if (options && options.img && options.img.showRect && this.currentImageUrl) {
+        const rectW = options.img.showRect.w // 展示图片宽
+        const rectH = options.img.showRect.h // 展示图片高
+        const rectX = options.img.showRect.x // 偏移量处理后x
+        const rectY = options.img.showRect.y // 偏移量处理后y
+        const offsetX = rectX + rectW / 2 // 偏移量x 正数右  负数左
+        const offsetY = rectY * 2 // 偏移量y 正数上  负数下
+
+        const { w, h } = options.mask
+        const obj = {
+
+          width: rectW,
+          height: rectH,
+          x: Math.ceil(rectW / 2 - w / 2 - offsetX),
+          y: Math.ceil(rectH / 2 - h / 2 - offsetY),
+          maskW: w,
+          maskH: h
+        }
+        const param = {
+          imageUrl: this.currentImageUrl,
+          coordinate: JSON.stringify(obj)
+        }
+        console.log('====params==', param)
+        this.$emit('uploadImage', param)
+      }
+    },
     handlerGetBase64(currentImageUrl, imgUrlBase64) {
-      this.changeImageUrl = currentImageUrl
+      this.currentImageUrl = currentImageUrl
       if (imgUrlBase64) {
         this.imageBase64 = imgUrlBase64
       } else {

src/views/goods/components/lamaImageDialog.vue

@@ -27,7 +27,7 @@ export default {
   },
   data() {
     return {
-      iframeSrc: ' http://lama.wanwudezhi.work/'
+      iframeSrc: 'https://lama.wanwudezhi.work/'
     }
   },
   mounted() {

src/views/goods/components/selectImageDialog.vue

@@ -74,26 +74,22 @@ export default {
         this.$message.error('该图片不支持该操作')
         return
       }
+      this.currentImageUrl = this.imageList[this.currentPosition]
       if (this.selectType === 1) { // 去水印
         this.copyContent(this.imageList[this.currentPosition])
         this.$message.success('复制链接成功，粘贴链接去水印吧')
         this.showLamaImageDialog = true
-        this.currentImageUrl = this.imageList[this.currentPosition]
       } else {
-        this.handleSelectSuccess(this.imageList[this.currentPosition])
-      /*  this.$emit('selectSuccess', this.imageList[this.currentPosition])
-        this.$emit('closeDialog')
-        this.currentImageUrl = ''*/
+        this.handleSelectSuccess(this.currentImageUrl)
       }
     },
-    handleGetImageBase64(imgUrlBase64) {
-      this.$emit('imageBase64Str', this.currentImageUrl, imgUrlBase64)
+    handleGetImageBase64(imgUrlBase64, width, height) {
+      this.$emit('imageBase64Str', this.currentImageUrl, imgUrlBase64, width, height)
       this.showLamaImageDialog = false
       this.$emit('closeDialog')
     },
     // 选择线上图片后的图片链接
     async handleSelectSuccess(url) {
-      this.changeImageUrl = url
       const base64Str = await this.getBase64Image(url)
       this.$emit('imageBase64Str', this.currentImageUrl, base64Str)
       this.showLamaImageDialog = false

src/views/goods/infoSet.vue

@@ -149,13 +149,15 @@
       :image-list="imageList"
       :show-cut-dialog="cutImageDialogVisible"
       @cutImageDialogClose="cutImageDialogVisible = false"
-      @cutSuccess="handleCutSuccess"/>
+      @cutSuccess="handleCutSuccess"
+      @uploadImage="handleUploadImage"/>
     <CutEditImageDialog
       v-if="cutEditImageDialogVisible"
       :edit-image-url="editImageUrl"
       :show-cut-dialog="cutImageDialogVisible"
       @cutEditImageDialogClose="cutEditImageDialogVisible = false"
-      @cutEditSuccess="handleSaveImageBase64"/>
+      @cutEditSuccess="handleSaveImageBase64"
+      @uploadEditImage="handleUploadImage"/>
 
   </div>
 </template>
@@ -165,7 +167,7 @@ import { VuePictureCut, VuePictureCutMask, VuePictureCutMenu } from 'vue-picture
 import { getToken } from '@/utils/auth'
 import SelectImageDialog from './components/selectImageDialog'
 import { listCategories } from '@/api/business/goods'
-import { detailGoods, editGoods, saveImageBase64 } from '@/api/business/goodsNew'
+import { detailGoods, editGoods, saveImageBase64, saveCroppingRecord } from '@/api/business/goodsNew'
 import CheckLargeImageDialog from './components/CheckLargeImageDialog'
 import CutImageDialog from './components/CutImageDialog'
 import CutEditImageDialog from './components/CutEditImageDialog'
@@ -394,6 +396,11 @@ export default {
         }
       })
     },
+    handleUploadImage(param) {
+      param.itemId = this.currentGoodId
+      saveCroppingRecord(param).then((response) => {
+      })
+    },
     // 裁剪工具取消
     cutCancel() {
       this.src = ''