diff --git a/src/components/base/BaseUploadPhoto.vue b/src/components/base/BaseUploadPhoto.vue index 9b22f9d..1aed717 100644 --- a/src/components/base/BaseUploadPhoto.vue +++ b/src/components/base/BaseUploadPhoto.vue @@ -8,10 +8,12 @@ type="file", id="image-upload", accept="image/.jpg,.jpeg,.png, .jpg", + class="image-field", @change="(e)=>previewImage(e)", + @click="compressed" ) .avatar.flex.absolute.items-center.gap-x-6 - img.avatar.object-cover(for="image-upload", :src="image") + img.avatar.object-cover(for="image-upload", :src="image" ) q-btn( round, color="primary", @@ -31,6 +33,7 @@ export default { data() { return { image: addImageIcon, + imageFile: null, }; }, mixins: [v_model], @@ -41,6 +44,44 @@ export default { }, }, methods: { + compressed() { + const compressImage = async (file, { quality = 1, type = file.type }) => { + const imageBitmap = await createImageBitmap(file); + const canvas = document.createElement("canvas"); + canvas.width = imageBitmap.width; + canvas.height = imageBitmap.height; + const ctx = canvas.getContext("2d"); + ctx.drawImage(imageBitmap, 0, 0); + + const blob = await new Promise((resolve) => + canvas.toBlob(resolve, type, quality) + ); + + return new File([blob], file.name, { + type: blob.type, + }); + }; + + const inputFile = document.querySelector(".image-field"); + inputFile.addEventListener("change", async (e) => { + const { files } = e.target; + if (!files.length) return; + const dataTransfer = new DataTransfer(); + + for (const file of files) { + if (!file.type.startsWith("image")) { + dataTransfer.items.add(file); + continue; + } + const compressedFile = await compressImage(file, { + quality: 0.5, + type: "image/jpeg", + }); + dataTransfer.items.add(compressedFile); + } + this.imageData = [...dataTransfer.files]; + }); + }, previewImage(event) { let picture = event.target.files; let reader = new FileReader(); diff --git a/src/pages/newMedicalCard/components/BasicDataForms/DocumentsForm.vue b/src/pages/newMedicalCard/components/BasicDataForms/DocumentsForm.vue index 40cd6ae..f025c2b 100644 --- a/src/pages/newMedicalCard/components/BasicDataForms/DocumentsForm.vue +++ b/src/pages/newMedicalCard/components/BasicDataForms/DocumentsForm.vue @@ -17,7 +17,7 @@ .label-field.font-sm.text-sm.whitespace-nowrap {{`${field.label} :`}} .photo-field.flex.gap-3.items-center(v-if="field.type === 'photo'") q-avatar( - square, + rounded, size="40px", v-if="docData[data.dataKey][field.key]?.photo" ) diff --git a/src/pages/newMedicalCard/components/BasicDataForms/InsuranceForm.vue b/src/pages/newMedicalCard/components/BasicDataForms/InsuranceForm.vue index 5976211..258e3f3 100644 --- a/src/pages/newMedicalCard/components/BasicDataForms/InsuranceForm.vue +++ b/src/pages/newMedicalCard/components/BasicDataForms/InsuranceForm.vue @@ -19,7 +19,7 @@ .label-field.font-sm.text-sm.whitespace-nowrap {{`${field.label} :`}} .avatar-field.flex.gap-3.items-center.h-10.w-10(v-if="field.type === 'avatar'") .flex.w-10.h-10.relative(v-if="basic[insurance.insuranceKey][field.key]?.photo") - img.avatar.object-cover( + img.rounded.avatar.object-cover( :src="basic[insurance.insuranceKey][field.key].photo", alt="AV" )