index.vue
2.49 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
<template>
<div :class="$attrs.class" :style="getWrapperStyle">
<img
v-show="isReady"
ref="imgElRef"
:src="src"
:alt="alt"
:crossorigin="crossorigin"
:style="getImageStyle"
/>
</div>
</template>
<script lang="ts">
import type { CSSProperties } from 'vue';
import { defineComponent, onMounted, ref, unref, computed } from 'vue';
import Cropper from 'cropperjs';
import 'cropperjs/dist/cropper.css';
type Options = Cropper.Options;
const defaultOptions: Cropper.Options = {
aspectRatio: 16 / 9,
zoomable: true,
zoomOnTouch: true,
zoomOnWheel: true,
cropBoxMovable: true,
cropBoxResizable: true,
toggleDragModeOnDblclick: true,
autoCrop: true,
background: true,
highlight: true,
center: true,
responsive: true,
restore: true,
checkCrossOrigin: true,
checkOrientation: true,
scalable: true,
modal: true,
guides: true,
movable: true,
rotatable: true,
};
export default defineComponent({
name: 'CropperImage',
props: {
src: {
type: String,
required: true,
},
alt: {
type: String,
},
height: {
type: [String, Number],
default: '360px',
},
crossorigin: {
type: String,
default: undefined,
},
imageStyle: {
type: Object as PropType<CSSProperties>,
default: {},
},
options: {
type: Object as PropType<Options>,
default: {},
},
},
setup(props) {
const imgElRef = ref<ElRef<HTMLImageElement>>(null);
const cropper = ref<Nullable<Cropper>>(null);
const isReady = ref(false);
const getImageStyle = computed(
(): CSSProperties => {
return {
height: props.height,
maxWidth: '100%',
...props.imageStyle,
};
}
);
const getWrapperStyle = computed(
(): CSSProperties => {
const { height } = props;
return { height: `${height}`.replace(/px/, '') + 'px' };
}
);
async function init() {
const imgEl = unref(imgElRef);
if (!imgEl) {
return;
}
cropper.value = new Cropper(imgEl, {
...defaultOptions,
ready: () => {
isReady.value = true;
},
...props.options,
});
}
onMounted(init);
return { imgElRef, getWrapperStyle, getImageStyle, isReady };
},
});
</script>