Initial commit

src/lib/Scropper.svelte

@@ -0,0 +1,63 @@
+<script lang="ts">
+  import EasyCropperjs from "@cloudparker/easy-cropperjs-svelte";
+
+  let easyCropperjsRef: EasyCropperjs | null = $state(null);
+  let file: File = $props();
+
+  // Функция для обработки обрезанного изображения
+  async function handleCrop() {
+    const data = await easyCropperjsRef?.crop({
+      outputWidth: 512, // Ширина обрезанного изображения
+      outputFormat: "png", // Формат обрезанного изображения
+      outputQuality: 0.6, // Качество
+      outputType: "file", // Тип данных
+    });
+
+    // Если данные обрезки получены и это Blob
+    if (data instanceof Blob) {
+      const downloadLink = document.createElement("a"); // Создаем элемент <a> для скачивания
+      downloadLink.href = URL.createObjectURL(data); // Создаем URL для обрезанного изображения
+      downloadLink.download = "cropped_image.png"; // Имя файла для скачивания
+      downloadLink.click(); // Имитируем клик для скачивания
+    } else {
+      console.log("Нет данных для скачивания");
+    }
+  }
+
+  // Получение результата обрезки
+  function handleCropResult(ev: CustomEvent) {
+    let base64ImageUrl: string = ev.detail;
+    // Используйте base64ImageUrl по вашему усмотрению
+  }
+
+  // Функция для получения файла
+  async function getFile(url: string) {
+    const fileName = url.split("/").pop() || "file.png";
+    const blob = await (await fetch(url)).blob();
+    const file = new File([blob], fileName, { type: blob.type });
+    return file;
+  }
+</script>
+
+<div class="p-4">
+  <div
+    class="w-[512px] h-[512px] overflow-hidden relative border-2 border-gray-300"
+  >
+    {#if file}
+      <EasyCropperjs
+        bind:this={easyCropperjsRef}
+        outputAspectRatio={1}
+        inputImageFile={file}
+        onCrop={handleCropResult}
+      />
+    {/if}
+  </div>
+
+  <!-- Кнопка для обрезки изображения -->
+  <button
+    onclick={handleCrop}
+    class="mt-4 p-2 bg-blue-500 text-white rounded hover:bg-blue-700"
+  >
+    Crop
+  </button>
+</div>