one page fix

2025-08-29 12:14:06 +03:00
parent 41e0617869
commit 76e152d90a
2 changed files with 104 additions and 421 deletions
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -78,31 +78,110 @@
    const node = document.getElementById("result");
    if (!node) return;

-    const imageElement = node.querySelector('image[clip-path]');
+    const svg = node.querySelector("svg");
+    if (!svg) return;

-    // Temporarily remove the clip-path for saving the square image
-    if (imageElement) {
-      imageElement.removeAttribute('clip-path');
+    const captureAndDownload = async (filename: string) => {
+      const imageElement = node.querySelector("image[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 {
+        if (imageElement) {
+          imageElement.setAttribute("clip-path", "url(#circle-clip)");
+        }
+      }
+    };
+
+    await captureAndDownload("avatar-круговой-текст.png");
+
+    if (!text.trim()) return;
+
+    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");
+
+      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 {
-      const dataUrl = await domtoimage.toPng(node, {
-        style: {
-          border: "none",
-          padding: "0",
-          margin: "0",
-          outline: "none",
-        },
-      });
-      const link = document.createElement("a");
-      link.download = "avatar.png";
-      link.href = dataUrl;
-      link.click();
+      await captureAndDownload("avatar-прямой-текст.png");
    } finally {
-      // Restore the clip-path for the UI to keep the circle
-      if (imageElement) {
-        imageElement.setAttribute('clip-path', 'url(#circle-clip)');
-      }
+      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 = "";
    }
  }

@@ -169,7 +248,6 @@
        style="cursor: pointer"
        onclick={() => document.getElementById("fileInput").click()}
      >
-        <!-- Состояние без изображения -->
        {#if !image}
          <div
            class="absolute inset-0 flex flex-col items-center justify-center cursor-pointer"
@@ -190,7 +268,6 @@
          </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">
@@ -204,8 +281,7 @@
                </pattern>
              </defs>
              <image href={image} width="512" height="512" clip-path="url(#circle-clip)" />
-              <!-- Текст -->
-            {#if text}
+              {#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"
@@ -219,7 +295,7 @@
                <text class="circle-text">
                  <textPath href="#text-path" startOffset="50%" text-anchor="middle">{text}</textPath>
                </text>
-            {/if}
+              {/if}
            </svg>
          </div>
        {/if}
@@ -249,7 +325,7 @@
          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"
        >
-          Сохранить 512×512
+          Сохранить аватары
        </button>
      </div>

@@ -277,7 +353,7 @@
 </div>

 <style>
-  .circle-text-bg {
+  :global(.circle-text-bg) {
    fill: none;
    stroke: rgb(0, 0, 0, 0.7);
    stroke-width: 5px;
@@ -289,7 +365,7 @@
    letter-spacing: 6px;
  }

-  .circle-text {
+  :global(.circle-text) {
    fill: url(#imagePattern);
    stroke: #000;
    stroke-width: 1.5px;
--- a/src/routes/test/+page.svelte
+++ b/src/routes/test/+page.svelte
@@ -1,393 +0,0 @@
-<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>