update

src/views/Step_5.vue

@@ -208,6 +208,7 @@ const openUploadInput = () => {
         />
 
         <div v-if="isShowModal" class="mt-5">
+          <!-- 尺寸 4:3 -->
           <VuePictureCropper
             :boxStyle="{
               width: '100%',
@@ -221,6 +222,11 @@ const openUploadInput = () => {
               dragMode: 'crop',
               aspectRatio: 16 / 9,
             }"
+            :presetMode="{
+              mode: 'fixedSize',
+              width: 1024,
+              height: 768,
+            }"
             @ready="ready"
           />
 
@@ -237,8 +243,16 @@ const openUploadInput = () => {
 
         <!-- Crop result preview -->
         <section v-if="result.dataURL" class="section">
-          <div class="preview-img mt-5">
-            <img :src="result.dataURL" />
+          <div
+            class="preview-img mt-5"
+            :style="`background-image: url('${result.dataURL}')`"
+          >
+            <div
+              class="mask"
+              id="mask"
+              :style="`background-image: url('${result.dataURL}')`"
+            ></div>
+            <!-- <img :src="result.dataURL" /> -->
           </div>
         </section>
 
@@ -284,12 +298,42 @@ const openUploadInput = () => {
 }
 
 .preview-img {
-  height: 30vh;
-  img {
+  position: relative;
+  width: 100%;
+  height: 50vw;
+  background-repeat: no-repeat;
+  background-position: center center;
+  background-size: cover;
+
+  &::after {
+    position: absolute;
+    content: "";
     width: 100%;
-    height: 30vh;
-    object-fit: cover;
+    height: 100%;
+    background-color: rgba(#000, 0.7);
+    z-index: 0;
   }
+
+  .mask {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    z-index: 15;
+    width: 100%;
+    height: 50vw;
+    background-repeat: no-repeat;
+    background-position: center center;
+    background-size: cover;
+    clip-path: xywh(40% 25% 70% 75% round 0);
+  }
+
+  // img {
+  //   width: 100%;
+  //   height: 30vh;
+  //   object-fit: cover;
+  //   position: relative;
+  // }
 }
 
 .content {