Initial commit

package-lock.json

@@ -8,11 +8,14 @@
 			"name": "imagegenerator",
 			"version": "0.0.1",
 			"dependencies": {
+				"@cloudparker/easy-script-loader-svelte": "^4.1.1",
 				"@sveltejs/adapter-node": "^5.2.13",
+				"cropperjs": "^2.0.0",
 				"dom-to-image": "^2.6.0",
 				"html2canvas": "^1.4.1"
 			},
 			"devDependencies": {
+				"@cloudparker/easy-cropperjs-svelte": "^2.4.0",
 				"@sveltejs/adapter-auto": "^6.0.0",
 				"@sveltejs/kit": "^2.22.0",
 				"@sveltejs/vite-plugin-svelte": "^6.0.0",
@@ -37,6 +40,155 @@
 				"node": ">=6.0.0"
 			}
 		},
+		"node_modules/@cloudparker/easy-cropperjs-svelte": {
+			"version": "2.4.0",
+			"resolved": "https://registry.npmjs.org/@cloudparker/easy-cropperjs-svelte/-/easy-cropperjs-svelte-2.4.0.tgz",
+			"integrity": "sha512-fDMIa9ga4JXLxjpKUQwTRjSm07t2FzHxsXTsr4vzyd1ZfPO3KNEc4h+GyT4kB+rsCDgmhplRd1v+gLNg29VlIQ==",
+			"dev": true,
+			"license": "MIT",
+			"peerDependencies": {
+				"svelte": "^5.0.0-next.1"
+			}
+		},
+		"node_modules/@cloudparker/easy-script-loader-svelte": {
+			"version": "4.1.1",
+			"resolved": "https://registry.npmjs.org/@cloudparker/easy-script-loader-svelte/-/easy-script-loader-svelte-4.1.1.tgz",
+			"integrity": "sha512-Q+Pwcakkg+Y4vx48s//ILKxY1FPcEkcWzHdqt3tyJ+ggExTSfgxY57iilah6Ckf8PIsB6R+UxvQUPLFVoZ54Kw==",
+			"license": "MIT",
+			"dependencies": {
+				"@cloudparker/easy-window-watcher": "^2.0.2",
+				"esm-env": "^1.1.4"
+			},
+			"peerDependencies": {
+				"svelte": "^5.2.0"
+			}
+		},
+		"node_modules/@cloudparker/easy-window-watcher": {
+			"version": "2.1.0",
+			"resolved": "https://registry.npmjs.org/@cloudparker/easy-window-watcher/-/easy-window-watcher-2.1.0.tgz",
+			"integrity": "sha512-OP1qzPhZ+3H32fcIy07heSfKhrziDa8p1mFtsGqHcO6jfEu0Vz67YY0C+J7P+qz+9C/tEJwBDJ1ghwi2Q8k9BQ==",
+			"license": "MIT"
+		},
+		"node_modules/@cropper/element": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/@cropper/element/-/element-2.0.0.tgz",
+			"integrity": "sha512-lsthn0nQq73GExUE7Mg/ss6Q3RXADGDv055hxoLFwvl/wGHgy6ZkYlfLZ/VmgBHC6jDK5IgPBFnqrPqlXWSGBA==",
+			"license": "MIT",
+			"dependencies": {
+				"@cropper/utils": "^2.0.0"
+			}
+		},
+		"node_modules/@cropper/element-canvas": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/@cropper/element-canvas/-/element-canvas-2.0.0.tgz",
+			"integrity": "sha512-GPtGJgSm92crJhhhwUsaMw3rz2KfJWWSz7kRAlufFEV/EHTP5+6r6/Z1BCGRna830i+Avqbm435XLOtA7PVJwA==",
+			"license": "MIT",
+			"dependencies": {
+				"@cropper/element": "^2.0.0",
+				"@cropper/utils": "^2.0.0"
+			}
+		},
+		"node_modules/@cropper/element-crosshair": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/@cropper/element-crosshair/-/element-crosshair-2.0.0.tgz",
+			"integrity": "sha512-KfPfyrdeFvUC31Ws7ATtcalWWSaMtrC6bMoCipZhqbUOE7wZoL4ecDSL6BUOZxPa74awZUqfzirCDjHvheBfyw==",
+			"license": "MIT",
+			"dependencies": {
+				"@cropper/element": "^2.0.0",
+				"@cropper/utils": "^2.0.0"
+			}
+		},
+		"node_modules/@cropper/element-grid": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/@cropper/element-grid/-/element-grid-2.0.0.tgz",
+			"integrity": "sha512-i78SQ0IJTLFveKX6P7svkfMYVdgHrQ8ZmmEw8keFy9n1ZVbK+SK0UHK5FNMRNI/gtVhKJOGEnK/zeyjUdj4Iyw==",
+			"license": "MIT",
+			"dependencies": {
+				"@cropper/element": "^2.0.0",
+				"@cropper/utils": "^2.0.0"
+			}
+		},
+		"node_modules/@cropper/element-handle": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/@cropper/element-handle/-/element-handle-2.0.0.tgz",
+			"integrity": "sha512-ZJvW+0MkK9E8xYymGdoruaQn2kwjSHFpNSWinjyq6csuVQiCPxlX5ovAEDldmZ9MWePPtWEi3vLKQOo2Yb0T8g==",
+			"license": "MIT",
+			"dependencies": {
+				"@cropper/element": "^2.0.0",
+				"@cropper/utils": "^2.0.0"
+			}
+		},
+		"node_modules/@cropper/element-image": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/@cropper/element-image/-/element-image-2.0.0.tgz",
+			"integrity": "sha512-9BxiTS/aHRmrjopaFQb9mQQXmx4ruhYHGkDZMVz24AXpMFjUY6OpqrWse/WjzD9tfhMFvEdu17b3VAekcAgpeg==",
+			"license": "MIT",
+			"dependencies": {
+				"@cropper/element": "^2.0.0",
+				"@cropper/element-canvas": "^2.0.0",
+				"@cropper/utils": "^2.0.0"
+			}
+		},
+		"node_modules/@cropper/element-selection": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/@cropper/element-selection/-/element-selection-2.0.0.tgz",
+			"integrity": "sha512-ensNnbIfJsJ8bhbJTH/RXtk2URFvTOO4TvfRk461n2FPEC588D7rwBmUJxQg74IiTi4y1JbCI+6j+4LyzYBLCQ==",
+			"license": "MIT",
+			"dependencies": {
+				"@cropper/element": "^2.0.0",
+				"@cropper/element-canvas": "^2.0.0",
+				"@cropper/element-image": "^2.0.0",
+				"@cropper/utils": "^2.0.0"
+			}
+		},
+		"node_modules/@cropper/element-shade": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/@cropper/element-shade/-/element-shade-2.0.0.tgz",
+			"integrity": "sha512-jv/2bbNZnhU4W+T4G0c8ADocLIZvQFTXgCf2RFDNhI5UVxurzWBnDdb8Mx8LnVplnkTqO+xUmHZYve0CwgWo+Q==",
+			"license": "MIT",
+			"dependencies": {
+				"@cropper/element": "^2.0.0",
+				"@cropper/element-canvas": "^2.0.0",
+				"@cropper/element-selection": "^2.0.0",
+				"@cropper/utils": "^2.0.0"
+			}
+		},
+		"node_modules/@cropper/element-viewer": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/@cropper/element-viewer/-/element-viewer-2.0.0.tgz",
+			"integrity": "sha512-zY+3VRN5TvpM8twlphYtXw0tzJL2VgzeK7ufhL1BixVqOdRxwP13TprYIhqwGt9EW/SyJZUiaIu396T89kRX8A==",
+			"license": "MIT",
+			"dependencies": {
+				"@cropper/element": "^2.0.0",
+				"@cropper/element-canvas": "^2.0.0",
+				"@cropper/element-image": "^2.0.0",
+				"@cropper/element-selection": "^2.0.0",
+				"@cropper/utils": "^2.0.0"
+			}
+		},
+		"node_modules/@cropper/elements": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/@cropper/elements/-/elements-2.0.0.tgz",
+			"integrity": "sha512-PQkPo1nUjxLFUQuHYu+6atfHxpX9B41Xribao6wpvmvmNIFML6LQdNqqWYb6LyM7ujsu71CZdBiMT5oetjJVoQ==",
+			"license": "MIT",
+			"dependencies": {
+				"@cropper/element": "^2.0.0",
+				"@cropper/element-canvas": "^2.0.0",
+				"@cropper/element-crosshair": "^2.0.0",
+				"@cropper/element-grid": "^2.0.0",
+				"@cropper/element-handle": "^2.0.0",
+				"@cropper/element-image": "^2.0.0",
+				"@cropper/element-selection": "^2.0.0",
+				"@cropper/element-shade": "^2.0.0",
+				"@cropper/element-viewer": "^2.0.0"
+			}
+		},
+		"node_modules/@cropper/utils": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/@cropper/utils/-/utils-2.0.0.tgz",
+			"integrity": "sha512-cprLYr+7kK3faGgoOsTW9gIn5sefDr2KwOmgyjzIXk+8PLpW8FgFKEg5FoWfRD5zMAmkCBuX6rGKDK3VdUEGrg==",
+			"license": "MIT"
+		},
 		"node_modules/@esbuild/aix-ppc64": {
 			"version": "0.25.7",
 			"resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.25.7.tgz",
@@ -1368,6 +1520,16 @@
 				"node": ">= 0.6"
 			}
 		},
+		"node_modules/cropperjs": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/cropperjs/-/cropperjs-2.0.0.tgz",
+			"integrity": "sha512-TO2j0Qre01kPHbow4FuTrbdEB4jTmGRySxW49jyEIqlJZuEBfrvCTT0vC3eRB2WBXudDfKi1Onako6DKWKxeAQ==",
+			"license": "MIT",
+			"dependencies": {
+				"@cropper/elements": "^2.0.0",
+				"@cropper/utils": "^2.0.0"
+			}
+		},
 		"node_modules/css-line-break": {
 			"version": "2.1.0",
 			"resolved": "https://registry.npmjs.org/css-line-break/-/css-line-break-2.1.0.tgz",

package.json

@@ -10,6 +10,7 @@
 		"prepare": "svelte-kit sync || echo ''"
 	},
 	"devDependencies": {
+		"@cloudparker/easy-cropperjs-svelte": "^2.4.0",
 		"@sveltejs/adapter-auto": "^6.0.0",
 		"@sveltejs/kit": "^2.22.0",
 		"@sveltejs/vite-plugin-svelte": "^6.0.0",
@@ -21,7 +22,9 @@
 		"vite": "^7.0.4"
 	},
 	"dependencies": {
+		"@cloudparker/easy-script-loader-svelte": "^4.1.1",
 		"@sveltejs/adapter-node": "^5.2.13",
+		"cropperjs": "^2.0.0",
 		"dom-to-image": "^2.6.0",
 		"html2canvas": "^1.4.1"
 	}

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}
+    ondrop={handleDrop}
-    on:dragover={handleDragOver}
+    ondragover={handleDragOver}
-    on:dragleave={handleDragLeave}
+    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>

svelte.config.js

@@ -6,7 +6,8 @@ const config = {
 		// adapter-auto only supports some environments, see https://svelte.dev/docs/kit/adapter-auto for a list.
 		// If your environment is not supported, or you settled on a specific environment, switch out the adapter.
 		// See https://svelte.dev/docs/kit/adapters for more information about adapters.
-		adapter: adapter()
+		adapter: adapter(),
+		
 	}
 };
 

vite.config.js

@@ -3,5 +3,14 @@ import { sveltekit } from '@sveltejs/kit/vite';
 import { defineConfig } from 'vite';
 
 export default defineConfig({
-	plugins: [tailwindcss(), sveltekit()]
+	plugins: [tailwindcss(), sveltekit()],
+	server:{
+	port:5173,
+		strictPort:false,
+	},
+	preview:{
+		port:4000,
+		strictPort:false,
+	}
+
 });