canrd-outside / order-erp-front · Commits

Commit 700306bb45d5f2b975c20bd2581fb87a210e589c

Authored by 啝裳
Committed by GitHub
1 parent ee1c3498

fix: Improve the picture cropping component (#463) 

* fix: Improve the picture cropping component

* fix: component /verify/rotate text show problem
Inline Side-by-side
Showing 3 changed files with 62 additions and 9 deletions
src/components/Cropper/src/index.vue
  View file @700306b
... ... @@ -69,9 +69,9 @@
69 69 default: {},
70 70 },
71 71 },
72   - setup(props) {
  72 + setup(props, ctx) {
73 73 const imgElRef = ref<ElRef<HTMLImageElement>>(null);
74   - const cropper = ref<Nullable<Cropper>>(null);
  74 + const cropper: any = ref<Nullable<Cropper>>(null);
75 75  
76 76 const isReady = ref(false);
77 77  
... ... @@ -106,9 +106,24 @@
106 106 });
107 107 }
108 108  
  109 + // event: return base64 and width and height information after cropping
  110 + const croppered = (): void => {
  111 + let imgInfo = cropper.value.getData();
  112 + cropper.value.getCroppedCanvas().toBlob(blob => {
  113 + let fileReader: FileReader = new FileReader()
  114 + fileReader.onloadend = (e: any) => {
  115 + ctx.emit("cropperedInfo", {
  116 + imgBase64: e.target.result,
  117 + imgInfo
  118 + })
  119 + }
  120 + fileReader.readAsDataURL(blob)
  121 + }, 'image/jpeg')
  122 + }
  123 +
109 124 onMounted(init);
110 125  
111   - return { imgElRef, getWrapperStyle, getImageStyle, isReady };
  126 + return { imgElRef, getWrapperStyle, getImageStyle, isReady, croppered };
112 127 },
113 128 });
114 129 </script>
... ...
src/components/Verify/src/ImgRotate.tsx
  View file @700306b
... ... @@ -152,7 +152,7 @@ export default defineComponent({
152 152 </span>
153 153 )}
154 154 {!state.showTip && !state.draged && (
155   - <span class={[`ir-dv-img__tip`, 'normal']}>t('redoTip')</span>
  155 + <span class={[`ir-dv-img__tip`, 'normal']}>{t('component.verify.redoTip')}</span>
156 156 )}
157 157 </div>
158 158 <BasicDragVerify
... ...
src/views/demo/comp/cropper/index.vue
  View file @700306b
1 1 <template>
2 2 <PageWrapper title="图片裁剪示例" contentBackground>
3   - <CropperImage src="https://fengyuanchen.github.io/cropperjs/images/picture.jpg" />
  3 + <div class="cropper-container">
  4 + <CropperImage ref="refCropper" src="https://fengyuanchen.github.io/cropperjs/images/picture.jpg" @cropperedInfo="cropperedInfo" style="width:40%" />
  5 + <a-button type="primary" @click="onCropper"> 裁剪 </a-button>
  6 + <img :src="cropperImg" class="croppered" v-if="cropperImg" />
  7 + </div>
  8 + <p v-if="cropperImg">裁剪后图片信息：{{ info }}</p>
4 9 </PageWrapper>
5 10 </template>
6 11 <script lang="ts">
7   - import { defineComponent } from 'vue';
  12 + import { defineComponent, ref, onBeforeMount, getCurrentInstance } from 'vue';
8 13 import { PageWrapper } from '/@/components/Page';
9   -
10 14 import { CropperImage } from '/@/components/Cropper';
11   -
12 15 import img from '/@/assets/images/header.jpg';
13 16 export default defineComponent({
14 17 components: {
... ... @@ -16,7 +19,42 @@
16 19 CropperImage,
17 20 },
18 21 setup() {
19   - return { img };
  22 + let vm: any;
  23 + let info = ref("");
  24 + let cropperImg = ref("");
  25 +
  26 + const onCropper = (): void => {
  27 + vm.refs.refCropper.croppered();
  28 + }
  29 +
  30 + onBeforeMount(()=>{
  31 + vm = getCurrentInstance();
  32 + })
  33 +
  34 + function cropperedInfo({ imgBase64, imgInfo }) {
  35 + info.value = imgInfo
  36 + cropperImg.value = imgBase64
  37 + }
  38 +
  39 + return {
  40 + img,
  41 + info,
  42 + cropperImg,
  43 + onCropper,
  44 + cropperedInfo
  45 + };
20 46 },
21 47 });
22 48 </script>
  49 +
  50 +<style scoped>
  51 +.cropper-container {
  52 + display:flex;
  53 + justify-content: space-around;
  54 + align-items: center;
  55 +}
  56 +.croppered {
  57 + width: 50%;
  58 + height: 100%;
  59 +}
  60 +</style>
... ...