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>

src/routes/+page.svelte

@@ -1,11 +1,13 @@
 <script>
   import domtoimage from "dom-to-image";
+  import Scropper from "$lib/Scropper.svelte";
 
   let image = null;
   let text = "";
   let error = "";
   let isDragging = false;
   let btnDisabled = image != null;
+  let isModalOpen = $state(false);
 
   // Проверка и загрузка изображения
   async function validateAndLoadImage(file) {
@@ -19,6 +21,7 @@
         if (img.width === 512 && img.height === 512) {
           image = e.target.result;
         } else {
+          isModalOpen = true;
           error = "Изображение должно быть 512×512 пикселей";
         }
       };
@@ -72,16 +75,25 @@
         link.click(); // Скачать изображение
       });
   }
+
+  const openModal = () => {
+    isModalOpen = true;
+  };
+
+  // Закрыть модальное окно
+  const closeModal = () => {
+    isModalOpen = false;
+  };
 </script>
 
 <div class="bg-white rounded-xl shadow-lg p-6">
   <div
     class="preview-container relative bg-gray-50 rounded-lg mb-4 overflow-hidden border-2 transition-colors h-[512px]"
-    on:drop={handleDrop}
-    on:dragover={handleDragOver}
-    on:dragleave={handleDragLeave}
+    ondrop={handleDrop}
+    ondragover={handleDragOver}
+    ondragleave={handleDragLeave}
     style="cursor: pointer"
-    on:click={() => document.getElementById("fileInput").click()}
+    onclick={() => document.getElementById("fileInput").click()}
   >
     <!-- Состояние без изображения -->
     {#if !image}
@@ -127,7 +139,7 @@
       type="file"
       accept="image/*"
       class="hidden"
-      on:change={(e) => validateAndLoadImage(e.target.files[0])}
+      onchange={(e) => validateAndLoadImage(e.target.files[0])}
     />
   </div>
 
@@ -145,7 +157,7 @@
       class="flex-grow px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
     />
     <button
-      on:click={saveImage}
+      onclick={saveImage}
       disabled={btnDisabled}
       class="px-6 py-3 bg-gradient-to-r from-purple-600 to-blue-600 text-white font-medium rounded-lg hover:opacity-90 transition-opacity disabled:opacity-50 disabled:cursor-not-allowed"
     >
@@ -156,4 +168,26 @@
   <p class="text-sm text-gray-500 text-center">
     Поддерживаются только изображения размером 512×512 пикселей
   </p>
+
+  <!-- Модальное окно -->
+  {#if isModalOpen}
+    <div
+      class="fixed inset-0 bg-gray-900 bg-opacity-50 flex justify-center items-center z-50"
+    >
+      <div class="bg-white p-4 rounded shadow-lg w-[512px] h-[512px]">
+        <h2 class="text-xl font-semibold mb-4">Crop your image</h2>
+        {#if file}
+          <Scropper {file}></Scropper>
+        {/if}
+        <div class="mt-4 flex justify-between">
+          <button
+            class="px-4 py-2 bg-gray-500 text-white rounded hover:bg-gray-700"
+            onclick={closeModal}
+          >
+            Close
+          </button>
+        </div>
+      </div>
+    </div>
+  {/if}
 </div>