test

package-lock.json

@@ -11399,6 +11399,11 @@
       "resolved": "https://registry.npmjs.org/vue/-/vue-2.6.10.tgz",
       "integrity": "sha512-ImThpeNU9HbdZL3utgMCq0oiMzAkt1mcgy3/E6zWC/G6AaQoeuFdsl9nDhTDU3X1R6FK7nsIUuRACVcjI+A2GQ=="
     },
+    "vue-cropper": {
+      "version": "0.4.9",
+      "resolved": "https://registry.npmjs.org/vue-cropper/-/vue-cropper-0.4.9.tgz",
+      "integrity": "sha512-Uf1i/sCh+ZqSM9hb2YTGRENzJFH+mvDuv8N2brGLjK7UBuF7XDP7zbis8g/dcqZiMojAcBDtObFCn4ERFbRMxQ=="
+    },
     "vue-eslint-parser": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-5.0.0.tgz",

package.json

@@ -14,6 +14,7 @@
     "node-sass": "^4.13.0",
     "qs": "^6.9.0",
     "vue": "^2.6.10",
+    "vue-cropper": "^0.4.9",
     "vue-router": "^3.1.3",
     "vue-waterfall2": "^1.9.4",
     "vuex": "^3.0.1"

src/main.js

@@ -7,6 +7,9 @@ import './styles/index.scss'; // global css
 import waterfall from 'vue-waterfall2'
 Vue.use(waterfall)
 
+import VueCropper from 'vue-cropper'
+Vue.use(VueCropper)
+
 import setWechatTitle from './utils/setWechatTitle'
 
 Vue.config.productionTip = false
@@ -23,8 +26,9 @@ router.beforeEach((to, from, next) => {
     if(!localStorage.getItem("token")){
       // let _url = document.location.href.split('#')[0]
       // location.href = _url+'api/MarketingToolApi/Wechat/index'
-      location.href = 'api/MarketingToolApi/Wechat/index'
-      // next()
+      
+      // location.href = 'api/MarketingToolApi/Wechat/index'
+      next()
     }else{
       var u = navigator.userAgent;
       var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端

src/views/tool.vue

 <template>
   <div id="tool">
+    <div class="cropper">
+                <vueCropper
+                    ref="cropper"
+                    :img="option.img"
+                    :outputSize="option.size"
+                    :outputType="option.outputType"
+                    :info="option.info"
+                    :full="option.full"
+                    :canMove="option.canMove"
+                    :canMoveBox="option.canMoveBox"
+                    :original="option.original"
+                    :autoCrop="option.autoCrop"
+                    :autoCropWidth="option.autoCropWidth"
+                    :autoCropHeight="option.autoCropHeight"
+                    :fixedBox="option.fixedBox"
+                    @realTime="realTime"
+                    @imgLoad="imgLoad"
+                ></vueCropper>
+            </div>
+    <div class="preview-box">
+        <div>预览：</div>
+        <div :style="previews.div" class="preview">
+            <img :src="previews.url" :style="previews.img">
+        </div>
+    </div>
     <!-- 21天模板 -->
     <div id="posterCon" class="posterCon_21" v-if="days==21||days==150">
       <div id="posterBox">
@@ -171,9 +196,27 @@ import navigation from '../components/navigaton/navigation.vue'
 import html2canvas from 'html2canvas'
 import request from '../utils/request'
 import loading from '../components/loading/loading.vue'
+
 export default {
   data() {
     return{
+        option: {
+                img: '', // 裁剪图片的地址
+                info: true, // 裁剪框的大小信息
+                outputSize: 1, // 剪切后的图片质量（0.1-1）
+                full: true, // 输出原图比例截图 props名full
+                outputType: 'png', // 裁剪生成额图片的格式
+                canMove: true,  // 能否拖动图片
+                original: false,  // 上传图片是否显示原始宽高
+                canMoveBox: true,  // 能否拖动截图框
+                autoCrop: true, // 是否默认生成截图框
+                autoCropWidth: 150, 
+                autoCropHeight: 150, 
+                fixedBox: false // 截图框固定大小
+            }, 
+            previews: {},
+
+
       posterUrl: '',
       showPoster: false,
       isX: false,
@@ -208,6 +251,7 @@ export default {
 
       guideStatus: 1,//是否进行过新手引导 1：已经引导过 0：未引导过
       guideId: 1,// 引导顺序
+
     }
   },
   components: {
@@ -296,6 +340,15 @@ export default {
     })
   },
   methods: {
+    // 实时预览函数 
+    realTime(data) { 
+      console.log('realTime')
+      this.previews = data 
+    },
+    imgLoad (msg) { 
+      console.log('imgLoad')
+      console.log(msg) 
+    },
     create() {
       // 使input失去焦点
       document.getElementById("currentDayInput").blur()
@@ -418,20 +471,24 @@ export default {
           success: function (res) {
             var u = navigator.userAgent, app = navigator.appVersion;
             var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
-            if (isiOS) {
-              me.uploadPic = res.localIds[0] // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
-            }else{
+            // if (isiOS) {
+            //   me.uploadPic = res.localIds[0] // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
+            // }else{
               wx.getLocalImgData({
                 localId: res.localIds[0], // 图片的localID
                 success: function (res) {
                   if (res.localData.substr(0, 5) != 'data:') {
                     me.uploadPic = 'data:image;base64,' + res.localData
+
+                    me.option.img = me.uploadPic
                   }else{
                     me.uploadPic = res.localData // localData是图片的base64数据，可以用img标签显示
+                  
+                    me.option.img = me.uploadPic
                   }
                 }
               })
-            }
+            // }
           }
         })
       }else{