add test page
This commit is contained in:
393
src/routes/test/+page.svelte
Normal file
393
src/routes/test/+page.svelte
Normal file
@@ -0,0 +1,393 @@
|
||||
<script lang="ts">
|
||||
import domtoimage from "dom-to-image";
|
||||
import { onMount } from "svelte";
|
||||
import Cropper, { type OnCropCompleteEvent } from "svelte-easy-crop";
|
||||
import gradiImage from "$lib/images/image.png"
|
||||
|
||||
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 image: string;
|
||||
let incorrectImage: string;
|
||||
let text: string = "";
|
||||
let error: string = "";
|
||||
let isDragging: boolean = false;
|
||||
let isModalOpen: boolean = false;
|
||||
let fontSize: number = 2.5;
|
||||
let gradiImageDataUrl: string = "";
|
||||
|
||||
async function toDataURL(url: string): Promise<string> {
|
||||
const response = await fetch(url);
|
||||
const blob = await response.blob();
|
||||
return new Promise((resolve, reject) => {
|
||||
const reader = new FileReader();
|
||||
reader.onloadend = () => resolve(reader.result as string);
|
||||
reader.onerror = reject;
|
||||
reader.readAsDataURL(blob);
|
||||
});
|
||||
}
|
||||
|
||||
onMount(async () => (gradiImageDataUrl = await toDataURL(gradiImage)));
|
||||
|
||||
async function validateAndLoadImage(file: File): Promise<void> {
|
||||
error = "";
|
||||
const img = new Image();
|
||||
const reader = new FileReader();
|
||||
|
||||
reader.onload = (e: ProgressEvent<FileReader>) => {
|
||||
img.src = e.target?.result as string;
|
||||
img.onload = () => {
|
||||
if (img.width === 512 && img.height === 512) {
|
||||
image = e.target?.result as string;
|
||||
} else {
|
||||
incorrectImage = e.target?.result as string;
|
||||
isModalOpen = true;
|
||||
}
|
||||
};
|
||||
};
|
||||
reader.readAsDataURL(file);
|
||||
}
|
||||
|
||||
function handleDrop(e: DragEvent): void {
|
||||
e.preventDefault();
|
||||
isDragging = false;
|
||||
const file = (e.dataTransfer as DataTransfer).files[0];
|
||||
if (file && file.type.startsWith("image/")) {
|
||||
validateAndLoadImage(file);
|
||||
}
|
||||
}
|
||||
|
||||
function handleDragOver(e: DragEvent): void {
|
||||
e.preventDefault();
|
||||
isDragging = true;
|
||||
}
|
||||
|
||||
function handleDragLeave(): void {
|
||||
isDragging = false;
|
||||
}
|
||||
|
||||
async function saveImage(): Promise<void> {
|
||||
if (!image) return;
|
||||
|
||||
const node = document.getElementById("result");
|
||||
if (!node) return;
|
||||
|
||||
const svg = node.querySelector("svg");
|
||||
if (!svg) return;
|
||||
|
||||
// Вспомогательная функция для захвата и скачивания текущего состояния узла
|
||||
const captureAndDownload = async (filename: string) => {
|
||||
const imageElement = node.querySelector("image[clip-path]");
|
||||
// Временно убираем clip-path для сохранения квадратного изображения
|
||||
if (imageElement) {
|
||||
imageElement.removeAttribute("clip-path");
|
||||
}
|
||||
|
||||
try {
|
||||
const dataUrl = await domtoimage.toPng(node, {
|
||||
style: {
|
||||
border: "none",
|
||||
padding: "0",
|
||||
margin: "0",
|
||||
outline: "none",
|
||||
},
|
||||
});
|
||||
const link = document.createElement("a");
|
||||
link.download = filename;
|
||||
link.href = dataUrl;
|
||||
link.click();
|
||||
} finally {
|
||||
// Восстанавливаем clip-path, чтобы в интерфейсе остался круг
|
||||
if (imageElement) {
|
||||
imageElement.setAttribute("clip-path", "url(#circle-clip)");
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// 1. Сохраняем версию с круговым текстом
|
||||
await captureAndDownload("avatar-круговой-текст.png");
|
||||
|
||||
if (!text.trim()) return; // Не сохраняем вторую версию, если текста нет
|
||||
|
||||
// 2. Готовим и сохраняем версию с прямым текстом внизу
|
||||
const circularTextPath = svg.querySelector("#text-path");
|
||||
const circularTextBg = svg.querySelector(".circle-text-bg");
|
||||
const circularText = svg.querySelector(".circle-text");
|
||||
|
||||
// Скрываем элементы кругового текста
|
||||
if (circularTextPath) (circularTextPath as HTMLElement).style.display = "none";
|
||||
if (circularTextBg) (circularTextBg as HTMLElement).style.display = "none";
|
||||
if (circularText) (circularText as HTMLElement).style.display = "none";
|
||||
|
||||
// --- Логика для переноса текста на новую строку ---
|
||||
const maxWidth = 500; // Максимальная ширина текста в пикселях
|
||||
const words = text.split(' ');
|
||||
const lines: string[] = [];
|
||||
|
||||
// Создаем временный элемент для точного измерения ширины текста
|
||||
const measurementText = document.createElementNS("http://www.w3.org/2000/svg", "text");
|
||||
measurementText.setAttribute("class", "circle-text"); // Применяем стили для корректного замера
|
||||
(measurementText as SVGTextElement).style.visibility = "hidden";
|
||||
svg.appendChild(measurementText);
|
||||
|
||||
const tspan = document.createElementNS("http://www.w3.org/2000/svg", "tspan");
|
||||
measurementText.appendChild(tspan);
|
||||
|
||||
let currentLine = '';
|
||||
for (const word of words) {
|
||||
const testLine = currentLine ? `${currentLine} ${word}` : word;
|
||||
tspan.textContent = testLine;
|
||||
if (tspan.getComputedTextLength() > maxWidth && currentLine) {
|
||||
lines.push(currentLine);
|
||||
currentLine = word;
|
||||
} else {
|
||||
currentLine = testLine;
|
||||
}
|
||||
}
|
||||
lines.push(currentLine); // Добавляем последнюю строку
|
||||
|
||||
// Получаем точную высоту строки в пикселях для расчета сдвига
|
||||
const computedStyle = window.getComputedStyle(measurementText);
|
||||
const computedFontSize = parseFloat(computedStyle.fontSize);
|
||||
const lineHeightPx = computedFontSize * 1.2;
|
||||
|
||||
svg.removeChild(measurementText); // Удаляем временный элемент
|
||||
|
||||
// Создаем видимые текстовые элементы с переносами
|
||||
const createTextWithWrapping = (className: string) => {
|
||||
const textEl = document.createElementNS("http://www.w3.org/2000/svg", "text");
|
||||
textEl.setAttribute("class", className);
|
||||
textEl.setAttribute("text-anchor", "middle");
|
||||
|
||||
// Рассчитываем начальную позицию Y, чтобы последняя строка была внизу
|
||||
const startY = 480 - ((lines.length - 1) * lineHeightPx);
|
||||
textEl.setAttribute("y", String(startY));
|
||||
|
||||
lines.forEach((line, index) => {
|
||||
const lineTspan = document.createElementNS("http://www.w3.org/2000/svg", "tspan");
|
||||
lineTspan.setAttribute("x", "256");
|
||||
if (index > 0) lineTspan.setAttribute("dy", "1.2em"); // Сдвигаем каждую новую строку вниз
|
||||
lineTspan.textContent = line;
|
||||
textEl.appendChild(lineTspan);
|
||||
});
|
||||
return textEl;
|
||||
};
|
||||
|
||||
const straightTextBg = createTextWithWrapping("circle-text-bg");
|
||||
const straightText = createTextWithWrapping("circle-text");
|
||||
|
||||
svg.appendChild(straightTextBg);
|
||||
svg.appendChild(straightText);
|
||||
|
||||
try {
|
||||
await captureAndDownload("avatar-прямой-текст.png");
|
||||
} finally {
|
||||
// Очистка: удаляем новые текстовые элементы и восстанавливаем круговые
|
||||
svg.removeChild(straightTextBg);
|
||||
svg.removeChild(straightText);
|
||||
if (circularTextPath) (circularTextPath as HTMLElement).style.display = "";
|
||||
if (circularTextBg) (circularTextBg as HTMLElement).style.display = "";
|
||||
if (circularText) (circularText as HTMLElement).style.display = "";
|
||||
}
|
||||
}
|
||||
|
||||
function cropImage(x: number, y: number, width: number, height: number) {
|
||||
const img = new Image();
|
||||
img.src = incorrectImage;
|
||||
|
||||
img.onload = () => {
|
||||
const canvas = document.createElement("canvas");
|
||||
const ctx = canvas.getContext("2d");
|
||||
canvas.width = 512;
|
||||
canvas.height = 512;
|
||||
|
||||
ctx.drawImage(img, x, y, width, height, 0, 0, 512, 512);
|
||||
|
||||
croppedImage = canvas.toDataURL("image/png");
|
||||
};
|
||||
}
|
||||
|
||||
const handleCropComplete = (event: OnCropCompleteEvent) => {
|
||||
const { x, y, width, height } = event.pixels;
|
||||
cropImage(x, y, width, height);
|
||||
};
|
||||
|
||||
function saveToMainImage() {
|
||||
image = croppedImage;
|
||||
isModalOpen = false;
|
||||
}
|
||||
</script>
|
||||
|
||||
<div>
|
||||
{#if isModalOpen}
|
||||
<div class="bg-white rounded-xl shadow-lg p-6">
|
||||
<div class="flex flex-col">
|
||||
<div class="h-[700px] w-[700px] relative rounded-2xl">
|
||||
<Cropper
|
||||
image={incorrectImage}
|
||||
{cropSize}
|
||||
{maxZoom}
|
||||
{minZoom}
|
||||
{restrictPosition}
|
||||
{showGrid}
|
||||
bind:crop
|
||||
bind:zoom
|
||||
oncropcomplete={handleCropComplete}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<button
|
||||
onclick={saveToMainImage}
|
||||
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 mt-3"
|
||||
>
|
||||
Обрезать
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="bg-white rounded-xl shadow-lg p-6">
|
||||
<div
|
||||
class="preview-container relative bg-gray-50 mb-4 overflow-hidden border-2 transition-colors h-[512px] w-[512px] rounded-full"
|
||||
ondrop={handleDrop}
|
||||
ondragover={handleDragOver}
|
||||
ondragleave={handleDragLeave}
|
||||
style="cursor: pointer"
|
||||
onclick={() => document.getElementById("fileInput").click()}
|
||||
>
|
||||
<!-- Состояние без изображения -->
|
||||
{#if !image}
|
||||
<div
|
||||
class="absolute inset-0 flex flex-col items-center justify-center cursor-pointer"
|
||||
>
|
||||
<svg
|
||||
class="w-16 h-16 text-gray-400 mb-3"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
stroke-width="2"
|
||||
d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"
|
||||
></path>
|
||||
</svg>
|
||||
<p class="text-lg text-gray-500">Перетащите изображение</p>
|
||||
<p class="text-sm text-gray-400 mt-1">или кликните для выбора</p>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<!-- Загруженное изображение -->
|
||||
{#if image}
|
||||
<div id="result" class="w-full h-full">
|
||||
<svg viewBox="0 0 512 512" class="w-full h-full" style="--font-size: {fontSize}rem" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<clipPath id="circle-clip">
|
||||
<circle cx="256" cy="256" r="256" />
|
||||
</clipPath>
|
||||
|
||||
<pattern id="imagePattern" patternUnits="userSpaceOnUse" width="512" height="512" >
|
||||
<image href={gradiImageDataUrl} width="512" height="512"/>
|
||||
</pattern>
|
||||
</defs>
|
||||
<image href={image} width="512" height="512" clip-path="url(#circle-clip)" />
|
||||
<!-- Текст -->
|
||||
{#if text}
|
||||
<path
|
||||
id="text-path"
|
||||
d="M 256,26 a 230,230 0 0,0 0,460 a 230,230 0 0,0 0,-460"
|
||||
fill="none"
|
||||
/>
|
||||
|
||||
<text class="circle-text-bg">
|
||||
<textPath href="#text-path" startOffset="50%" text-anchor="middle">{text}</textPath>
|
||||
</text>
|
||||
|
||||
<text class="circle-text">
|
||||
<textPath href="#text-path" startOffset="50%" text-anchor="middle">{text}</textPath>
|
||||
</text>
|
||||
{/if}
|
||||
</svg>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<input
|
||||
id="fileInput"
|
||||
type="file"
|
||||
accept="image/*"
|
||||
class="hidden"
|
||||
onchange={(e) =>
|
||||
validateAndLoadImage((e.target as HTMLInputElement).files[0])}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{#if error}
|
||||
<p class="text-red-500 text-sm mb-4 text-center">{error}</p>
|
||||
{/if}
|
||||
|
||||
<div class="flex flex-col sm:flex-row gap-3 mb-4">
|
||||
<input
|
||||
type="text"
|
||||
bind:value={text}
|
||||
placeholder="Должность"
|
||||
class="flex-grow px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
/>
|
||||
<button
|
||||
onclick={saveImage}
|
||||
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"
|
||||
>
|
||||
Сохранить аватары
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center gap-3 mb-4">
|
||||
<label for="font-size-slider" class="text-sm text-gray-600 whitespace-nowrap"
|
||||
>Размер текста:</label
|
||||
>
|
||||
<input
|
||||
id="font-size-slider"
|
||||
type="range"
|
||||
min="1.5"
|
||||
max="7"
|
||||
step="0.1"
|
||||
bind:value={fontSize}
|
||||
class="w-full"
|
||||
/>
|
||||
<div class="min-w-[25px] min-h-[25px]">{fontSize}</div>
|
||||
</div>
|
||||
|
||||
<p class="text-sm text-gray-500 text-center">
|
||||
Размер изображения 512×512 пикселей
|
||||
</p>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
:global(.circle-text-bg) {
|
||||
fill: none;
|
||||
stroke: rgb(0, 0, 0, 0.7);
|
||||
stroke-width: 5px;
|
||||
stroke-linejoin:round;
|
||||
stroke-linecap:round;
|
||||
paint-order: stroke;
|
||||
font-size: var(--font-size);
|
||||
font-weight: 700;
|
||||
letter-spacing: 6px;
|
||||
}
|
||||
|
||||
:global(.circle-text) {
|
||||
fill: url(#imagePattern);
|
||||
stroke: #000;
|
||||
stroke-width: 1.5px;
|
||||
paint-order: stroke;
|
||||
letter-spacing: 6px;
|
||||
font-size: var(--font-size);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
</style>
|
||||
Reference in New Issue
Block a user