🐛 修复作品集提交裁剪问题

修复作品集提交裁剪问题

config/api.config.js

@@ -12,11 +12,11 @@ const apisMap = {
     VDITOR_CSS: 'https://static.rymcu.com/vditor@3.8.14/dist/css/content-theme'
   },
   test: {
-    FE: 'https://test.rymcu.com',
+    FE: 'https://rymcu.com',
-    BASE: 'https://test.rymcu.com',
+    BASE: 'https://rymcu.com',
     CDN: 'https://static.rymcu.com',
     PROXY: 'https://static.rymcu.com/proxy',
-    SOCKET: 'https://test.rymcu.com/wss',
+    SOCKET: 'https://rymcu.com/wss',
     GRAVATAR: 'https://static.rymcu.com/avatar',
     VDITOR: 'https://static.rymcu.com/vditor@3.8.14/',
     VDITOR_CSS: 'https://static.rymcu.com/vditor@3.8.14/dist/css/content-theme'

nuxt.config.js

@@ -58,8 +58,8 @@ export default {
     {src: '~/plugins/axios'},
     {src: '~/plugins/element-ui'},
     {src: '~/plugins/vditor', ssr: false},
-    {src: '~/plugins/vue-sse'}
+    {src: '~/plugins/vue-sse'},
-    // {src: '~/plugins/vue-cropper', ssr: false}
+    {src: '~/plugins/vue-cropper', ssr: false}
   ],
   /*
   ** Nuxt.js dev-modules

package.json

@@ -13,6 +13,7 @@
     "prepare": "husky install"
   },
   "dependencies": {
+    "@babel/types": "^7.21.2",
     "@chenfengyuan/vue-qrcode": "^1.0.2",
     "@nuxtjs/auth-next": "^5.0.0-1667386184.dfbbb54",
     "@nuxtjs/axios": "^5.13.1",
@@ -27,7 +28,7 @@
     "save-svg-as-png": "^1.4.17",
     "simple-icons": "^6.23.0",
     "vditor": "^3.8.18",
-    "vue-cropperjs": "^4.2.0",
+    "vue-cropper": "^0.6.2",
     "vue-sse": "^2.5.2",
     "vuejs-avataaars": "^4.0.1"
   },

pages/admin/tag/post/_tag_id.vue

@@ -120,8 +120,7 @@
 <script>
 import Vue from "vue";
 import {mapState} from 'vuex';
-import VueCropper from "vue-cropperjs";
+import VueCropper from "vue-cropper";
-import 'cropperjs/dist/cropper.css';
 import apiConfig from '~/config/api.config';
 
 export default {

pages/admin/topic/post/_topic_id.vue

@@ -118,8 +118,7 @@
 <script>
 import Vue from 'vue';
 import {mapState} from 'vuex';
-import VueCropper from 'vue-cropperjs';
+import VueCropper from 'vue-cropper';
-import 'cropperjs/dist/cropper.css';
 import apiConfig from '~/config/api.config';
 
 export default {

pages/portfolio/post/_portfolio_id.vue

@@ -31,6 +31,8 @@
         </el-col>
         <el-col :span="6">
           <el-card>
+            <div>
+              <div class="cropperBox">
                 <vue-cropper
                   :aspect-ratio="1"
                   :autoCrop="autoCrop"
@@ -38,18 +40,26 @@
                   :fixedNumber="[1,2]"
                   :checkCrossOrigin="false"
                   :checkOrientation="false"
-              :imgStyle="{'width': '200px'}"
                   :img="headImgUrl"
                   preview=".preview"
                   ref="cropper"
-              v-if="headImgUrl"
+                  @realTime="realTime"
                 />
+              </div>
+              <div class="cropperBox">
+                <div :style="{height:cropImg.h+'px',width:cropImg.w+'px'}"
+                     style="overflow:hidden;margin: 0 auto">
+                  <img :src="cropImg.url" :style="cropImg.img">
+                </div>
+              </div>
 
-            <div class="preview preview-large"/>
               <h4 class="article-header-md">{{ portfolio.portfolioTitle }}</h4>
               <div class="portfolioDescription">
                 {{ portfolio.portfolioDescription }}
               </div>
+
+              <div class="button_box">
+
                 <el-upload
                   :before-upload="beforeAvatarUpload"
                   :multiple="true"
@@ -60,12 +70,11 @@
                     <el-button plain round type="primary">上传</el-button>
                   </div>
                 </el-upload>
-            <el-button @click.prevent="reset" plain round style="margin-top: 1rem;" type="primary">重置
+
+                <el-button @click="reset" style="margin-left: 10px" plain round type="primary">重置
                 </el-button>
-            <el-button @click.prevent="cropImage" plain round type="primary">裁剪</el-button>
+              </div>
-            <p style="color: red;padding-right: 5px;">*
+            </div>
-              <span style="color: black">上传图片调整至最佳效果后,请点击裁剪按钮截取</span>
-            </p>
           </el-card>
         </el-col>
       </el-row>
@@ -85,8 +94,6 @@
 <script>
 import Vue from 'vue';
 import {mapState} from 'vuex';
-import VueCropper from 'vue-cropperjs';
-import 'cropperjs/dist/cropper.css';
 import apiConfig from '~/config/api.config';
 
 export default {
@@ -103,9 +110,7 @@ export default {
         .catch(err => error({statusCode: 404}))
     ])
   },
-  components: {
+
-    VueCropper
-  },
   computed: {
     ...mapState({
       portfolioDetail: state => state.portfolio.detail.data,
@@ -160,6 +165,9 @@ export default {
     }
   },
   methods: {
+    realTime(data) {
+      this.cropImg = data
+    },
     _initEditor(data) {
       //初始化
       let _ts = this;
@@ -256,7 +264,7 @@ export default {
       if (res && res.data && res.data.url) {
         let portfolio = _ts.portfolio;
         portfolio.headImgUrl = res.data.url;
-        portfolio.headImgType = '0';
+        // portfolio.headImgType = '0';
         _ts.$set(_ts, 'portfolio', portfolio);
         _ts.$set(_ts, 'headImgUrl', res.data.url);
       } else {
@@ -284,20 +292,24 @@ export default {
       reader.readAsDataURL(file);
       reader.onload = function () {
         _ts.$set(_ts, 'headImgUrl', this.result);
-        _ts.$refs.cropper?.replace(this.result);
+        // _ts.$refs.cropper?.replace(this.result);
       }
     },
     async updatePortfolio() {
       //headImgUrl
       let _ts = this;
-      this.cropImage()
+      // this.cropImage()
       _ts.$set(_ts, 'loading', true);
       let id = _ts.idPortfolio;
       let portfolioDescription = _ts.contentEditor.getValue();
       let portfolioDescriptionHtml = _ts.contentEditor.getHTML();
       let data = _ts.portfolio;
+      this.$refs.cropper.getCropData(img => {
+        data.headImgUrl = img
         data.portfolioDescription = portfolioDescription;
         data.portfolioDescriptionHtml = portfolioDescriptionHtml;
+        // data.headImgUrl = _ts.headImgUrl
+        data.headImgType = '0';
         if ((data.portfolioDescription || undefined) == undefined || (data.portfolioDescriptionHtml || undefined) == undefined) {
           this.$message.error('请输入必填信息');
           return false
@@ -318,6 +330,7 @@ export default {
           }
           _ts.$set(_ts, 'loading', false)
         }).catch(error => _ts.$set(_ts, 'loading', false))
+      })
     },
     deletePortfolio() {
       let _ts = this;
@@ -346,24 +359,9 @@ export default {
       });
     },
     reset() {
-      this.$refs.cropper.reset();
+      this.headImgUrl = ''
+      // this.$refs.cropper.clearCrop()
     },
-    // get image data for post processing, e.g. upload or setting image src
-    cropImage() {
-      let _ts = this;
-      try {
-        _ts.cropImg = _ts.$refs.cropper.getCroppedCanvas().toDataURL();
-        let portfolio = _ts.portfolio;
-        portfolio.headImgUrl = _ts.cropImg;
-        portfolio.headImgType = '0';
-        _ts.$set(_ts, 'portfolio', portfolio);
-        _ts.$set(_ts, 'headImgUrl', _ts.cropImg);
-        _ts.$message.success('已裁剪 !');
-      } catch (e) {
-        _ts.$message.error('图片获取失败 !');
-        return;
-      }
-    }
   },
   beforeRouteLeave(to, from, next) {
     let _ts = this;
@@ -415,8 +413,8 @@ export default {
 
     let portfolioContent = '';
     if (_ts.idPortfolio) {
-      this.isEdit = true
+      // this.isEdit = true
-      // _ts.$set(_ts, 'isEdit', true);
+      _ts.$set(_ts, 'isEdit', true);
       _ts.$set(_ts, 'portfolio', JSON.parse(JSON.stringify(_ts.portfolioDetail)));
       _ts.$set(_ts, 'headImgUrl', _ts.portfolioDetail.headImgUrl);
       if (!this.isEdit) {
@@ -443,6 +441,10 @@ export default {
 <style lang="less">
 @import "~vditor/src/assets/less/index.less";
 
+.button_box {
+  display: flex;
+}
+
 .wrapper_portfolio {
   width: 100%;
   max-width: 100%;
@@ -478,10 +480,16 @@ export default {
 
 .preview-large {
   width: 100%;
-  height: 480px;
+  height: 380px;
   box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
   background-color: #ffffff;
   overflow: hidden;
+  border: 1px solid red;
+
+  > img {
+    display: block;
+    margin: 0 auto;
+  }
 }
 
 .portfolioDescription {
@@ -496,4 +504,13 @@ export default {
   -webkit-line-clamp: 3;
   word-break: break-all;
 }
+
+.cropperBox {
+  width: 100%;
+  height: 300px;
+  margin-bottom: 20px;
+  border: 1px solid #F2F6FC;
+}
+
+
 </style>

pages/user/settings/avatar.vue

@@ -75,8 +75,7 @@
 import {mapState} from 'vuex';
 import Avataaars from 'vuejs-avataaars';
 import saveSvg from 'save-svg-as-png';
-import VueCropper from 'vue-cropperjs';
+import VueCropper from 'vue-cropper';
-import 'cropperjs/dist/cropper.css';
 
 const {generateRandomAvatar} = require('~/plugins/avataaars/generator/generateAvatar');
 export default {

plugins/vue-cropper.js

@@ -1,4 +1,4 @@
+import vueCropper from 'vue-cropper';
 import Vue from 'vue';
-import VueCropper from 'vue-cropperjs';
+
-import 'cropperjs/dist/cropper.css';
+Vue.use(vueCropper);
-Vue.component('vue-cropper', VueCropper);