图片裁切

.env.development

@@ -1,4 +1,4 @@
-VUE_APP_BASE_URL=https://test.raex.vip/
+VUE_APP_BASE_URL=https://www.raex.vip/
 NODE_ENV=development
 VUE_APP_PUBLIC_PATH=/
 ASSETS_PATH=raex

package.json

@@ -65,6 +65,7 @@
         "less-loader": "^5.0.0",
         "prettier": "^2.2.1",
         "style-resources-loader": "^1.4.1",
-        "vue-cli-plugin-style-resources-loader": "^0.1.5"
+        "vue-cli-plugin-style-resources-loader": "^0.1.5",
+        "vue-picture-cropper": "^0.5.1"
     }
 }

src/components/PictureCropper.vue

@@ -0,0 +1,97 @@
+<template>
+    <van-overlay :show="show">
+        <VuePictureCropper
+            :boxStyle="{
+                width: '100%',
+                height: '100%',
+                backgroundColor: '#f8f8f8',
+                margin: 'auto'
+            }"
+            :img="pic"
+            :options="{
+                viewMode: 1,
+                dragMode: 'crop',
+                aspectRatio: 1 / 1
+            }"
+        />
+
+        <div class="btns">
+            <van-button type="primary" plain @click="cancel">取消</van-button>
+            <van-button type="primary" @click="getResult"> 确认</van-button>
+        </div>
+    </van-overlay>
+</template>
+
+<script>
+import VuePictureCropper, { cropper } from 'vue-picture-cropper';
+export default {
+    data() {
+        return {
+            show: false,
+            pic: '',
+            result: {}
+        };
+    },
+    methods: {
+        init(img = '') {
+            this.pic = img;
+            this.show = true;
+        },
+        cancel() {
+            this.show = false;
+            this.$emit('updateImg', '');
+        },
+        async getResult() {
+            this.$toast.loading({
+                message: '加载中...',
+                forbidClick: true
+            });
+            // 获取生成的base64图片地址
+            const base64 = cropper.getDataURL();
+            // 获取生成的blob文件信息
+            const blob = await cropper.getBlob();
+            // 获取生成的file文件信息
+            const file = await cropper.getFile({
+                fileName: '测试文件名，可不传'
+            });
+            console.log({ base64, blob, file });
+            // 把base64赋给结果展示区
+            this.result.dataURL = base64;
+            this.result.blobURL = URL.createObjectURL(blob);
+            console.log(this.result);
+            this.updateFile({ file: file }, file.type).then(img => {
+                this.$toast.clear();
+                this.show = false;
+                this.$emit('updateImg', img);
+            });
+            // 隐藏裁切弹窗
+            // this.isShowDialog = false;
+        }
+    },
+    components: {
+        VuePictureCropper
+    }
+};
+</script>
+
+<style lang="less" scoped>
+.van-overlay {
+    z-index: 99;
+}
+.btns {
+    position: absolute;
+    padding: 9px 48px;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    .bottom(9px);
+    background-color: #222426;
+    .flex();
+    padding: 9px 16px;
+    z-index: 30;
+    justify-content: space-between;
+    .van-button {
+        width: 120px;
+    }
+}
+</style>

src/views/star/Create.vue

@@ -59,7 +59,7 @@
                 </div>
 
                 <div class="btn" v-if="chooseId">
-                    <van-button @click="step = 1" type="primary" block round>确认销毁，下一步</van-button>
+                    <van-button @click="sureCancel" type="primary" block round>确认销毁，下一步</van-button>
                 </div>
             </van-list>
         </van-pull-refresh>
@@ -133,6 +133,7 @@
             <Vue3Lottie :width="200" :animationData="star2JSON" />
             <div class="lottie-text">星图铸造中</div>
         </div>
+        <picture-cropper ref="cropper" @updateImg="updateImg"></picture-cropper>
     </div>
 </template>
 
@@ -145,11 +146,13 @@ import zuzhaoJSON from '../../assets/lottie/zuzhao.json';
 import starJSON from '../../assets/lottie/star.json';
 import star1JSON from '../../assets/lottie/star1.json';
 import star2JSON from '../../assets/lottie/star2.json';
+import pictureCropper from '../../components/PictureCropper.vue';
 
 export default {
     mixins: [product, list],
     components: {
-        Vue3Lottie
+        Vue3Lottie,
+        pictureCropper
     },
     data() {
         return {
@@ -170,7 +173,7 @@ export default {
             star2JSON
         };
     },
-    inject: ['barHeight'],
+    inject: ['barHeight', 'changeScroll'],
     computed: {
         showList() {
             let list = [...this.list];
@@ -218,15 +221,26 @@ export default {
             });
         },
         afterRead(file, e) {
-            console.log(file);
+            this.$refs.cropper.init(file.content);
             file.status = 'uploading';
-            this.updateFile(file, 'id', 1000).then(img => {
-                console.log(img);
-                file.url = img;
-                file.status = 'done';
-                file.name = file.file.name;
-                file.type = file.file.type;
-            });
+            file.name = file.file.name;
+            file.type = file.file.type;
+            // this.updateFile(file, 'id', 1000).then(img => {
+            //     console.log(img);
+            //     file.url = img;
+            //     file.status = 'done';
+            //     file.name = file.file.name;
+            //     file.type = file.file.type;
+            // });
+        },
+        updateImg(img = '') {
+            if (img) {
+                this.form.pic[0].status = 'done';
+                this.form.pic[0].url = img;
+            } else {
+                this.form.pic[0].status = 'done';
+                this.form.pic = [];
+            }
         },
         submit() {
             let form = {
@@ -260,6 +274,10 @@ export default {
                         this.$toast(e.error);
                     }
                 });
+        },
+        sureCancel() {
+            this.changeScroll(0);
+            this.step = 1;
         }
     }
 };

yarn.lock

@@ -3255,6 +3255,11 @@ create-hmac@^1.1.0, create-hmac@^1.1.4, create-hmac@^1.1.7:
     safe-buffer "^5.0.1"
     sha.js "^2.4.8"
 
+cropperjs@^1.5.12:
+  version "1.5.12"
+  resolved "https://registry.yarnpkg.com/cropperjs/-/cropperjs-1.5.12.tgz#d9c0db2bfb8c0d769d51739e8f916bbc44e10f50"
+  integrity sha512-re7UdjE5UnwdrovyhNzZ6gathI4Rs3KGCBSc8HCIjUo5hO42CtzyblmWLj6QWVw7huHyDMfpKxhiO2II77nhDw==
+
 croppie@^2.6.4:
   version "2.6.5"
   resolved "https://registry.npmjs.org/croppie/-/croppie-2.6.5.tgz"
@@ -9521,6 +9526,13 @@ vue-lottie@^0.2.1:
   dependencies:
     lottie-web "^5.1.9"
 
+vue-picture-cropper@^0.5.1:
+  version "0.5.1"
+  resolved "https://registry.yarnpkg.com/vue-picture-cropper/-/vue-picture-cropper-0.5.1.tgz#4b49e78f8e1386ce355002f8d84078bf03b6d22f"
+  integrity sha512-hHwTRsmpHazd1ZVDZA7hMm2FSAUSfnagi60orxX5qsEhx3dxwb8jOv8weC6pz9YMitQs8US7KTbusi01UeRTkg==
+  dependencies:
+    cropperjs "^1.5.12"
+
 vue-router@^4.0.0-0:
   version "4.0.12"
   resolved "https://registry.npmjs.org/vue-router/-/vue-router-4.0.12.tgz"