test

src/views/tool.vue

 <template>
   <div id="tool">
     <div class="cropper" v-if="cropperShow">
-      <!-- <vueCropper
+      <vueCropper
         ref="cropper"
         :img="option.img"
         :outputSize="option.size"
@@ -19,16 +19,14 @@
       <div class="cropperOpt">
         <span @click="cropperShow=false">取消</span>
         <span @click="croppSure">完成</span>
-      </div> -->
-      <!-- <div class="main" v-if="visible"> -->
-      <div class="cropperOpt">
+      </div>
+      <!-- <div class="cropperOpt">
         <div class="button" @click="confirm">使用</div>
         <div class="button cancel" @click="cropperShow=false">取消</div>
       </div>
       <div class="content">
         <quick-cropper ref="cropper" :img-src="imgSrc" @finish="finish"></quick-cropper>
-      </div>
-      <!-- </div> -->
+      </div> -->
     </div>
     <!-- 21天模板 -->
     <div id="posterCon" class="posterCon_21" v-if="days==21||days==150">
@@ -205,21 +203,21 @@ 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 // 截图框固定大小
-      // },
-      imgSrc: '',
+      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 // 截图框固定大小
+      },
+      // imgSrc: '',
       cropperShow: false,
 
 
@@ -346,31 +344,32 @@ export default {
     })
   },
   methods: {
-    // croppSure() {//裁剪完成
-    //   this.$refs.cropper.getCropData(data=>{
-    //     this.option.img = ''
-    //     this.previews = {}
-    //     this.uploadPic = data
-    //     this.cropperShow = false
-    //   })
-    // },
-    finish(base64,data){
-      console.log(base64,'图片base64')
-      console.log(data,'图片二进制')
-      this.uploadPic = base64
-      this.cropperShow = false
-    },
-    // 确定使用
-    confirm() {
-      this.$nextTick(() => {
-        // 确认截图
-        this.$refs.cropper.confirm()
+    croppSure() {//裁剪完成
+      this.$refs.cropper.getCropData(data=>{
+        this.option.img = ''
+        this.previews = {}
+        this.uploadPic = data
+        this.cropperShow = false
       })
     },
-    // 取消
-    cancel(){
-      this.visible = false
-    },
+
+    // finish(base64,data){
+    //   console.log(base64,'图片base64')
+    //   console.log(data,'图片二进制')
+    //   this.uploadPic = base64
+    //   this.cropperShow = false
+    // },
+    // // 确定使用
+    // confirm() {
+    //   this.$nextTick(() => {
+    //     // 确认截图
+    //     this.$refs.cropper.confirm()
+    //   })
+    // },
+    // // 取消
+    // cancel(){
+    //   this.visible = false
+    // },
 
     create() {
       // 使input失去焦点
@@ -500,6 +499,7 @@ export default {
               wx.getLocalImgData({
                 localId: res.localIds[0], // 图片的localID
                 success: function (res) {
+                  console.log(res.localData)
                   if (res.localData.substr(0, 5) != 'data:') {
                     // me.uploadPic = 'data:image;base64,' + res.localData
 
@@ -596,35 +596,35 @@ export default {
         height: 100%;
       }
       .cropperOpt{
-        position: fixed;
-        top: 0;
-        right: 0;
-        height: 44px;
+      //   position: fixed;
+      //   top: 0;
+      //   right: 0;
+      //   height: 44px;
+      //   width: 100%;
+      //   background: #303030;
+      //   .button {
+      //     float: right;
+      //     height: 44px;
+      //     line-height: 44px;
+      //     font-size: 14px;
+      //     margin-right: 15px;
+      //     color: green;
+      //   }
+      //   .cancel{
+      //     float:left;
+      //     margin-left:15px;
+      //   }
+        position: absolute;
+        bottom: 0;
         width: 100%;
-        background: #303030;
-        .button {
-          float: right;
-          height: 44px;
-          line-height: 44px;
-          font-size: 14px;
-          margin-right: 15px;
-          color: green;
-        }
-        .cancel{
-          float:left;
-          margin-left:15px;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        span{
+          color: #fff;
+          font-weight: 500;
+          padding: 15px 20px;
         }
-        // position: absolute;
-        // bottom: 0;
-        // width: 100%;
-        // display: flex;
-        // justify-content: space-between;
-        // align-items: center;
-        // span{
-        //   color: #fff;
-        //   font-weight: 500;
-        //   padding: 15px 20px;
-        // }
       }
     }