fix: Improve the picture cropping component (#463)

* fix: Improve the picture cropping component * fix: component /verify/rotate text show problem

fix: Improve the picture cropping component (#463)
* fix: Improve the picture cropping component * fix: component /verify/rotate text show problem
啝裳 · GitHub
1 parent ee1c3498
Showing 3 changed files with 62 additions and 9 deletions
src/components/Cropper/src/index.vue
src/components/Verify/src/ImgRotate.tsx
src/views/demo/comp/cropper/index.vue
@@ -69,9 +69,9 @@
         default: {},
       },
     },
-    setup(props) {
+    setup(props, ctx) {
       const imgElRef = ref<ElRef<HTMLImageElement>>(null);
-      const cropper = ref<Nullable<Cropper>>(null);
+      const cropper: any = ref<Nullable<Cropper>>(null);
       const isReady = ref(false);
@@ -106,9 +106,24 @@
         });
       }
+      // event: return base64 and width and height information after cropping
+      const croppered = (): void => {
+        let imgInfo = cropper.value.getData();
+        cropper.value.getCroppedCanvas().toBlob(blob => {
+        let fileReader: FileReader = new FileReader()
+          fileReader.onloadend = (e: any) => {
+            ctx.emit("cropperedInfo", {
+              imgBase64: e.target.result,
+              imgInfo
+            })
+          }
+          fileReader.readAsDataURL(blob)
+        }, 'image/jpeg')
+      }
+
       onMounted(init);
-      return { imgElRef, getWrapperStyle, getImageStyle, isReady };
+      return { imgElRef, getWrapperStyle, getImageStyle, isReady, croppered };
     },
   });
 </script>
@@ -152,7 +152,7 @@ export default defineComponent({
               </span>
             )}
             {!state.showTip && !state.draged && (
-              <span class={[`ir-dv-img__tip`, 'normal']}>t('redoTip')</span>
+              <span class={[`ir-dv-img__tip`, 'normal']}>{t('component.verify.redoTip')}</span>
             )}
           </div>
           <BasicDragVerify
 <template>
   <PageWrapper title="图片裁剪示例" contentBackground>
-    <CropperImage src="https://fengyuanchen.github.io/cropperjs/images/picture.jpg" />
+    <div class="cropper-container">
+      <CropperImage ref="refCropper" src="https://fengyuanchen.github.io/cropperjs/images/picture.jpg" @cropperedInfo="cropperedInfo" style="width:40%" />
+      <a-button type="primary" @click="onCropper"> 裁剪 </a-button>
+      <img :src="cropperImg" class="croppered" v-if="cropperImg" />
+    </div>
+    <p v-if="cropperImg">裁剪后图片信息：{{ info }}</p>
   </PageWrapper>
 </template>
 <script lang="ts">
-  import { defineComponent } from 'vue';
+  import { defineComponent, ref, onBeforeMount, getCurrentInstance } from 'vue';
   import { PageWrapper } from '/@/components/Page';
-
   import { CropperImage } from '/@/components/Cropper';
-
   import img from '/@/assets/images/header.jpg';
   export default defineComponent({
     components: {
@@ -16,7 +19,42 @@
       CropperImage,
     },
     setup() {
-      return { img };
+      let vm: any;
+      let info = ref("");
+      let cropperImg = ref("");
+
+      const onCropper = (): void => {
+        vm.refs.refCropper.croppered();
+      }
+
+      onBeforeMount(()=>{
+        vm = getCurrentInstance();
+      })
+
+     function cropperedInfo({ imgBase64, imgInfo }) {
+       info.value = imgInfo
+       cropperImg.value = imgBase64
+     }
+
+      return {
+        img,
+        info,
+        cropperImg,
+        onCropper,
+        cropperedInfo
+      };
     },
   });
 </script>
+
+<style scoped>
+.cropper-container {
+  display:flex;
+  justify-content: space-around;
+  align-items: center;
+}
+.croppered {
+  width: 50%;
+  height: 100%;
+}
+</style>