serverus/imagegenerator
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

Initial commit

Browse Source
This commit is contained in:
Smile Rex
2025-07-20 22:49:55 +03:00
parent 9220daf8eb
commit f2ce41360b
6 changed files with 280 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

162
package-lock.json generated
View File

@@ -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",

3
package.json
View File

@@ -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"
}

63
src/lib/Scropper.svelte Normal file
View File

@@ -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>

46
src/routes/+page.svelte
View File

@@ -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>

3
svelte.config.js
View File

@@ -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(),
}
};

11
vite.config.js
View File

@@ -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,
}
});