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

del modules

Browse Source
This commit is contained in:
Serverus Snap
2025-08-29 22:58:02 +03:00
parent 76e152d90a
commit 8d0f626283
3 changed files with 1 additions and 140 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
Dockerfile
View File

@@ -8,7 +8,7 @@ RUN npm install
COPY . . COPY . .
RUN npm run build RUN npm run build
# Stage 2: Production
FROM node:20-alpine FROM node:20-alpine
WORKDIR /app WORKDIR /app

40
src/lib/Alert.svelte
View File

@@ -1,40 +0,0 @@
<script lang="ts">
export let isOpen = false;
function closeModal() {
isOpen = false;
close();
}
</script>
<div class="inline-flex items-center text-base font-semibold text-gray-900">
<div>
{#if isOpen}
<div
class="relative z-10"
aria-labelledby="dialog-title"
role="dialog"
aria-modal="true"
>
<!-- Затемнение фона -->
<div
class="fixed inset-0 bg-gray-700/20 bg-opacity-75 transition-opacity"
aria-hidden="true"
on:click={closeModal}
></div>
<!-- Центрирование по вертикали и горизонтали -->
<div class="fixed inset-0 z-10 flex items-center justify-center p-4">
<div
class="w-full max-w-md transform rounded-lg bg-white p-6 shadow-xl transition-all"
>
<!-- Центрированное содержимое -->
<div class="flex flex-col items-center space-y-4 text-center">
<slot></slot>
</div>
</div>
</div>
</div>
{/if}
</div>
</div>

99
src/lib/Scropper.svelte
View File

@@ -1,99 +0,0 @@
<script>
import Cropper from "svelte-easy-crop";
let image = $props(); // начальное изображение
let crop = { x: 0, y: 0 };
let zoom = 1;
let cropSize = { width: 512, height: 512 };
let maxZoom = 10;
let minZoom = 1;
let restrictPosition = true;
let showGrid = false;
let croppedImage = null; // хранение вырезанного изображения
let imageLoaded = false;
// Функция для обработки загрузки изображения
function handleImageUpload(event) {
const file = event.target.files[0];
if (file) {
const reader = new FileReader();
reader.onload = (e) => {
image = e.target.result; // Set the image
imageLoaded = true; // Mark image as loaded
};
reader.readAsDataURL(file); // Convert to base64
}
}
// Функция для обрезки изображения
function cropImage(x, y, width, height) {
const img = new Image();
img.src = image;
img.onload = () => {
const canvas = document.createElement("canvas");
const ctx = canvas.getContext("2d");
canvas.width = width;
canvas.height = height;
// Обрезаем изображение с помощью canvas
ctx.drawImage(img, x, y, width, height, 0, 0, width, height);
// Получаем обрезанное изображение в формате base64
croppedImage = canvas.toDataURL("image/png");
};
}
// Функция для скачивания обрезанного изображения
function downloadImage() {
const link = document.createElement("a");
link.href = croppedImage;
link.download = "cropped-image.png";
link.click();
}
// Обработчик события cropcomplete
function handleCropComplete(event) {
if (!imageLoaded) return; // Prevent cropping if image is not loaded yet
const { x, y, width, height } = event.detail;
cropImage(x, y, width, height);
}
</script>
<div class="flex flex-col">
<div class="h-[1024px] w-[1024px] relative">
<Cropper
{image}
{cropSize}
{maxZoom}
{minZoom}
{restrictPosition}
{showGrid}
bind:crop
bind:zoom
on:cropcomplete={handleCropComplete}
/>
</div>
<button on:click={downloadImage}> Скачать вырезанное изображение </button>
</div>
<style>
.upload-btn {
margin: 10px 0;
}
.download-btn {
margin-top: 10px;
padding: 10px 20px;
background-color: #4caf50;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
.download-btn:hover {
background-color: #45a049;
}
</style>