@winchsa/ui 0.1.51 → 0.1.53
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -58,6 +58,7 @@ const initCropper = () => {
|
|
|
58
58
|
cropperInstance.value = new Cropper(cropperImage.value, {
|
|
59
59
|
aspectRatio: 1,
|
|
60
60
|
viewMode: 1,
|
|
61
|
+
autoCropArea: 1,
|
|
61
62
|
responsive: true,
|
|
62
63
|
zoomable: true,
|
|
63
64
|
scalable: false,
|
|
@@ -72,6 +73,21 @@ const initCropper = () => {
|
|
|
72
73
|
});
|
|
73
74
|
}
|
|
74
75
|
};
|
|
76
|
+
const closeCropper = () => {
|
|
77
|
+
if (cropperInstance.value) {
|
|
78
|
+
cropperInstance.value.destroy();
|
|
79
|
+
cropperInstance.value = null;
|
|
80
|
+
}
|
|
81
|
+
if (cropImageSrc.value) {
|
|
82
|
+
URL.revokeObjectURL(cropImageSrc.value);
|
|
83
|
+
cropImageSrc.value = null;
|
|
84
|
+
}
|
|
85
|
+
selectedFile.value = null;
|
|
86
|
+
if (fileInputRef.value) {
|
|
87
|
+
fileInputRef.value.value = "";
|
|
88
|
+
}
|
|
89
|
+
cropperDialog.value = false;
|
|
90
|
+
};
|
|
75
91
|
const cropImage = () => {
|
|
76
92
|
if (!cropperInstance.value) {
|
|
77
93
|
return;
|
|
@@ -80,15 +96,17 @@ const cropImage = () => {
|
|
|
80
96
|
width: 200,
|
|
81
97
|
height: 200
|
|
82
98
|
});
|
|
99
|
+
const fileType = selectedFile.value?.type;
|
|
100
|
+
const fileName = selectedFile.value?.name ?? "image.jpg";
|
|
83
101
|
canvas.toBlob((blob) => {
|
|
84
|
-
if (blob
|
|
85
|
-
const croppedFile = new File([blob],
|
|
102
|
+
if (blob) {
|
|
103
|
+
const croppedFile = new File([blob], fileName, { type: fileType });
|
|
86
104
|
generateImageUrl(croppedFile);
|
|
87
105
|
model.value = croppedFile;
|
|
88
106
|
emit("update");
|
|
89
|
-
|
|
107
|
+
closeCropper();
|
|
90
108
|
}
|
|
91
|
-
},
|
|
109
|
+
}, fileType);
|
|
92
110
|
};
|
|
93
111
|
const deleteUserImage = () => {
|
|
94
112
|
imageSrc.value = avatar;
|
|
@@ -178,7 +196,7 @@ const hasImage = computed(() => {
|
|
|
178
196
|
width="500"
|
|
179
197
|
:has-icon="false"
|
|
180
198
|
@save="cropImage"
|
|
181
|
-
@cancel="
|
|
199
|
+
@cancel="closeCropper"
|
|
182
200
|
>
|
|
183
201
|
<img
|
|
184
202
|
v-if="cropImageSrc"
|