[WIP] Добавил функцию сжатия изображения

src/components/base/BaseUploadPhoto.vue

@@ -8,7 +8,9 @@
         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" )
@@ -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();