add test page

src/routes/test/+page.svelte

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