fix: resolve image download errors, update export and image services

package-lock.json

@@ -23,6 +23,7 @@
 				"@sveltejs/vite-plugin-svelte": "^6.2.4",
 				"@types/file-saver": "^2.0.7",
 				"@types/node": "^25.1.0",
+				"konva": "^10.2.0",
 				"svelte": "^5.48.2",
 				"svelte-check": "^4.3.5",
 				"typescript": "^5.9.3",
@@ -1413,8 +1414,7 @@
 					"url": "https://github.com/sponsors/lavrton"
 				}
 			],
-			"license": "MIT",
+			"license": "MIT"
-			"peer": true
 		},
 		"node_modules/lie": {
 			"version": "3.3.0",

package.json

@@ -18,6 +18,7 @@
 		"@sveltejs/vite-plugin-svelte": "^6.2.4",
 		"@types/file-saver": "^2.0.7",
 		"@types/node": "^25.1.0",
+		"konva": "^10.2.0",
 		"svelte": "^5.48.2",
 		"svelte-check": "^4.3.5",
 		"typescript": "^5.9.3",

src/components/image/ImageCropper.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
   import Button from "$components/ui/Button.svelte";
-  import { ImageService } from "$lib/services/imageService";
   import type { ImageCropResult } from "$lib/types/panel";
   import { setLoading } from "$stores/uiStore";
   import CropperJS from "cropperjs";
@@ -19,8 +18,6 @@
   let isProcessing = $state(false);
   let errorMessage = $state<string | undefined>(undefined);
 
-  let imageService = new ImageService();
-
   onMount(() => {
     initializeCropper();
     return () => {

src/components/image/ImageUpload.svelte

@@ -1,12 +1,10 @@
 <script lang="ts">
   import Button from "$components/ui/Button.svelte";
-  import { ImageService } from "$lib/services/imageService";
   import type { ImageUploadResult } from "$lib/types/panel";
   import { handleError } from "$lib/utils/errorHandler";
   import { clearError, setCurrentStep, setLoading, uiStore } from "$stores/uiStore";
   import { onMount } from "svelte";
-
+  import { imageService } from "../../services/imageService";
-  let imageService = new ImageService();
 
   interface Props {
     onImageSelect: (image: string) => void;

src/components/layout/AppContainer.svelte

@@ -16,7 +16,7 @@
     onTextAdd: (text: string) => void;
     onTextUpdate: (id: string, newText: string) => void;
     onTextDelete: (id: string) => void;
-    onDownload: (panel: any) => Promise<void>;
+    onDownload: (panel: any, konvaStage: any) => Promise<void>;
     onDownloadAll: () => Promise<void>;
   }
 

src/components/layout/AppContent.svelte

@@ -14,7 +14,7 @@
     onTextUpdate: (id: string, newText: string) => void;
     onTextDelete: (id: string) => void;
     onUploadNewImage: () => void;
-    onDownload: (panel: any) => Promise<void>;
+    onDownload: (panel: any, konvaStage: any) => Promise<void>;
     onDownloadAll: () => Promise<void>;
   }
 

src/components/layout/Sidebar.svelte

@@ -7,7 +7,7 @@
     backgroundImage: string | undefined;
     panels: any[];
     onUploadNewImage: () => void;
-    onDownload: (panel: any) => Promise<void>;
+    onDownload: (panel: any, konvaStage: any) => Promise<void>;
     onDownloadAll: () => Promise<void>;
   }
 

src/components/panel/PanelPreview.svelte

@@ -2,16 +2,27 @@
   import Button from "$components/ui/Button.svelte";
   import type { Panel, TextItem } from "$lib/types/panel";
   import { setCurrentStep } from "$stores/uiStore";
+  import type { Stage as KonvaStage } from "konva/lib/Stage";
   import { Image, Layer, Stage, Text } from "svelte-konva";
 
   interface Props {
     panel: Panel;
-    onDownload?: () => void;
+    onDownload?: (panel: Panel, konvaStage: KonvaStage) => void;
   }
 
   let { panel, onDownload }: Props = $props();
 
   let backgroundImage: HTMLImageElement | undefined = $state(undefined);
+  let konvaStage: KonvaStage | null = $state(null);
+  let stageComponent: any = $state(null);
+
+  // Get the Konva stage after component mounts
+  $effect(() => {
+    if (stageComponent) {
+      // According to svelte-konva docs, access the node property to get the underlying Konva Stage
+      konvaStage = stageComponent.node;
+    }
+  });
 
   function handleUploadNewImage() {
     setCurrentStep("upload");
@@ -25,7 +36,6 @@
 
   function loadImage(src: string) {
     // Remove verbose logging - image data is too large for console
-    console.log("[PanelPreview] Loading background image");
     const img = document.createElement("img");
     img.onload = () => {
       backgroundImage = img;
@@ -37,8 +47,41 @@
   }
 
   function handleDownload() {
-    if (onDownload) {
+    console.log("[PanelPreview] handleDownload called");
-      onDownload();
+    console.log("[PanelPreview] onDownload exists:", onDownload ? true : false);
+    console.log("[PanelPreview] konvaStage exists:", konvaStage ? true : false);
+    console.log("[PanelPreview] konvaStage value:", konvaStage);
+    console.log("[PanelPreview] stageComponent exists:", stageComponent ? true : false);
+
+    // Try different approaches to get the Konva stage for download
+    let stageToUse = konvaStage;
+
+    if (!stageToUse && stageComponent) {
+      console.log("[PanelPreview] konvaStage is null, trying to get stage from stageComponent");
+
+      // Try different properties that might contain the Konva stage
+      stageToUse = stageComponent.node || stageComponent.stage || stageComponent._stage || stageComponent;
+
+      // Check if this is actually a valid Konva stage
+      if (stageToUse && typeof stageToUse.toBlob === "function") {
+        console.log("[PanelPreview] Found valid Konva stage in stageComponent");
+      } else {
+        console.log("[PanelPreview] stageComponent itself might be the Konva stage");
+        // Maybe stageComponent IS the Konva stage - check if it has toBlob
+        if (typeof stageComponent.toBlob === "function") {
+          stageToUse = stageComponent;
+          console.log("[PanelPreview] ✅ stageComponent IS the Konva stage");
+        } else {
+          console.log("[PanelPreview] ❌ Could not find valid Konva stage");
+        }
+      }
+    }
+
+    if (onDownload && stageToUse) {
+      console.log("[PanelPreview] Calling onDownload with panel and stage");
+      onDownload(panel, stageToUse);
+    } else {
+      console.error("[PanelPreview] Cannot download - onDownload or valid stage is missing");
     }
   }
 
@@ -78,7 +121,7 @@
     <!-- Превью с текстом -->
     <div class="preview-section">
       <div class="canvas-container">
-        <Stage width={320} height={panel.height}>
+        <Stage width={320} height={panel.height} bind:this={stageComponent}>
           <!-- Background layer -->
           <Layer>
             {#if backgroundImage}

src/components/panel/PanelsList.svelte

@@ -1,11 +1,12 @@
 <script lang="ts">
   import type { Panel } from "$lib/types/panel";
-  import PanelPreview from "./PanelPreview.svelte";
+  import type { Stage as KonvaStage } from "konva/lib/Stage";
   import Button from "../ui/Button.svelte";
+  import PanelPreview from "./PanelPreview.svelte";
 
   interface Props {
     panels: Panel[];
-    onDownload: (panel: Panel) => void;
+    onDownload: (panel: Panel, konvaStage: KonvaStage) => void;
     onDownloadAll: () => void;
   }
   let { panels, onDownload, onDownloadAll }: Props = $props();
@@ -20,7 +21,7 @@
     <div class="panels-list">
       {#each panels as panel (panel.id)}
         <div class="panel-item">
-          <PanelPreview {panel} onDownload={() => onDownload(panel)} />
+          <PanelPreview {panel} onDownload={(panel, konvaStage) => onDownload(panel, konvaStage)} />
         </div>
       {/each}
     </div>

src/lib/services/exportService.ts

@@ -1,100 +0,0 @@
-import pkg from "file-saver";
-import { ImageError } from "../types/errors";
-import type { Panel } from "../types/panel";
-import { handleError, logError } from "../utils/errorHandler";
-const { saveAs } = pkg;
-
-export interface ExportResult {
-  success: boolean;
-  error?: string;
-}
-
-export class ExportService {
-  /**
-   * Экспортирует панель в изображение и сохраняет её
-   */
-  async exportPanel(panel: Panel, filename?: string): Promise<ExportResult> {
-    try {
-      if (!panel.backgroundImage) {
-        throw new ImageError("Нет фонового изображения для экспорта");
-      }
-
-      // Создаем canvas для экспорта
-      const canvas = document.createElement("canvas");
-      const ctx = canvas.getContext("2d");
-
-      if (!ctx) {
-        throw new ImageError("Не удалось создать контекст canvas");
-      }
-
-      // Устанавливаем размеры canvas
-      canvas.width = 320;
-      canvas.height = panel.height;
-
-      // Загружаем фоновое изображение
-      const bgImage = await this.loadImage(panel.backgroundImage);
-
-      // Рисуем фон
-      ctx.drawImage(bgImage, 0, 0, 320, panel.height);
-
-      // Рисуем текст
-      const textItem = panel.text;
-      ctx.font = `${textItem.fontSize}px ${textItem.fontFamily}`;
-      ctx.fillStyle = textItem.color;
-      ctx.textAlign = "center";
-      ctx.textBaseline = "middle";
-
-      // Calculate position based on existing system
-      const x = 160; // Center of 320px panel
-      const y = panel.height / 2 + textItem.verticalOffset;
-
-      ctx.fillText(textItem.text, x, y);
-
-      // Конвертируем в blob и сохраняем
-      canvas.toBlob((blob) => {
-        if (!blob) {
-          throw new ImageError("Не удалось создать изображение");
-        }
-
-        const defaultFilename = `twitch-panel-${panel.id}.png`;
-        saveAs(blob, filename || defaultFilename);
-      }, "image/png");
-
-      return {
-        success: true,
-      };
-    } catch (error) {
-      logError(error, "Panel export failed");
-      return {
-        success: false,
-        error: handleError(error, "Ошибка экспорта панели"),
-      };
-    }
-  }
-
-  /**
-   * Загружает изображение из base64 строки
-   */
-  private loadImage(src: string): Promise<HTMLImageElement> {
-    return new Promise((resolve, reject) => {
-      const img = document.createElement("img");
-      img.onload = () => resolve(img);
-      img.onerror = () => reject(new ImageError("Не удалось загрузить изображение"));
-      img.src = src;
-    });
-  }
-
-  /**
-   * Экспортирует несколько панелей в ZIP архив
-   * (будет реализовано позже для batch download)
-   */
-  async exportPanels(panels: Panel[]): Promise<ExportResult> {
-    // TODO: Реализовать пакетный экспорт с использованием JSZip
-    return {
-      success: false,
-      error: "Пакетный экспорт еще не реализован",
-    };
-  }
-}
-
-export const exportService = new ExportService();

src/lib/services/imageService.ts

@@ -1,214 +0,0 @@
-import { type ImageUploadResult, type ImageCropResult } from "../types/panel";
-import { ImageError } from "../types/errors";
-import {
-  validateImageFile,
-  validateImageUrl,
-  loadImage,
-  getImageDimensions,
-  calculateAspectRatioFit,
-} from "../utils/imageValidator";
-import { handleError, logError } from "../utils/errorHandler";
-
-export class ImageService {
-  async handleFileUpload(file: File): Promise<ImageUploadResult> {
-    try {
-      // Validate file
-      const validation = validateImageFile(file);
-      if (!validation.isValid) {
-        return {
-          success: false,
-          error: validation.error,
-        };
-      }
-
-      // Convert file to base64
-      const base64 = await this.fileToBase64(file);
-
-      return {
-        success: true,
-        image: base64,
-      };
-    } catch (error) {
-      logError(error, "File upload failed");
-      return {
-        success: false,
-        error: handleError(error, "Ошибка загрузки файла"),
-      };
-    }
-  }
-
-  async handleUrlUpload(url: string): Promise<ImageUploadResult> {
-    try {
-      // Validate URL
-      const urlValidation = validateImageUrl(url);
-      if (!urlValidation.isValid) {
-        return {
-          success: false,
-          error: urlValidation.error,
-        };
-      }
-
-      // Load image
-      const img = await loadImage(url);
-
-      // Validate loaded image
-      const imgValidation = getImageDimensions(img);
-      if (imgValidation.width === 0 || imgValidation.height === 0) {
-        return {
-          success: false,
-          error: "Не удалось загрузить изображение по указанному URL",
-        };
-      }
-
-      // Convert to base64
-      const base64 = await this.imageToBase64(img);
-
-      return {
-        success: true,
-        image: base64,
-      };
-    } catch (error) {
-      logError(error, "URL upload failed");
-      return {
-        success: false,
-        error: handleError(error, "Ошибка загрузки изображения по URL"),
-      };
-    }
-  }
-
-  async handlePasteUpload(pasteEvent: ClipboardEvent): Promise<ImageUploadResult> {
-    try {
-      const items = pasteEvent.clipboardData?.items;
-      if (!items || items.length === 0) {
-        return {
-          success: false,
-          error: "В буфер обмена не найдено изображений",
-        };
-      }
-
-      // Find image item
-      let imageItem: DataTransferItem | undefined = undefined;
-      for (let i = 0; i < items.length; i++) {
-        if (items[i].type.indexOf("image") !== -1) {
-          imageItem = items[i];
-          break;
-        }
-      }
-
-      if (!imageItem) {
-        return {
-          success: false,
-          error: "В буфер обмена не найдено изображений",
-        };
-      }
-
-      // Get file from clipboard item
-      const file = imageItem.getAsFile();
-      if (!file) {
-        return {
-          success: false,
-          error: "Не удалось получить файл из буфера обмена",
-        };
-      }
-
-      // Validate and process file
-      const validation = validateImageFile(file);
-      if (!validation.isValid) {
-        return {
-          success: false,
-          error: validation.error,
-        };
-      }
-
-      const base64 = await this.fileToBase64(file);
-
-      return {
-        success: true,
-        image: base64,
-      };
-    } catch (error) {
-      logError(error, "Paste upload failed");
-      return {
-        success: false,
-        error: handleError(error, "Ошибка вставки изображения"),
-      };
-    }
-  }
-
-  async cropImage(
-    imageSrc: string,
-    cropArea: { x: number; y: number; width: number; height: number },
-  ): Promise<ImageCropResult> {
-    try {
-      const img = await loadImage(imageSrc);
-      const canvas = document.createElement("canvas");
-      const ctx = canvas.getContext("2d");
-
-      if (!ctx) {
-        throw new ImageError("Не удалось создать контекст canvas");
-      }
-
-      // Set canvas size to crop area
-      canvas.width = cropArea.width;
-      canvas.height = cropArea.height;
-
-      // Draw cropped image
-      ctx.drawImage(
-        img,
-        cropArea.x,
-        cropArea.y,
-        cropArea.width,
-        cropArea.height,
-        0,
-        0,
-        cropArea.width,
-        cropArea.height,
-      );
-
-      // Convert to base64
-      const croppedImage = canvas.toDataURL("image/png");
-
-      return {
-        success: true,
-        croppedImage,
-      };
-    } catch (error) {
-      logError(error, "Image cropping failed");
-      return {
-        success: false,
-        error: handleError(error, "Ошибка обрезки изображения"),
-      };
-    }
-  }
-
-  private fileToBase64(file: File): Promise<string> {
-    return new Promise((resolve, reject) => {
-      const reader = new FileReader();
-      // TODO: look for a better way to handle errors non strings
-      reader.onload = () => resolve(reader.result as string);
-      reader.onerror = () => reject(new ImageError("Ошибка чтения файла"));
-      reader.readAsDataURL(file);
-    });
-  }
-
-  private imageToBase64(img: HTMLImageElement): Promise<string> {
-    return new Promise((resolve, reject) => {
-      try {
-        const canvas = document.createElement("canvas");
-        const ctx = canvas.getContext("2d");
-
-        if (!ctx) {
-          throw new ImageError("Не удалось создать контекст canvas");
-        }
-
-        canvas.width = img.naturalWidth;
-        canvas.height = img.naturalHeight;
-
-        ctx.drawImage(img, 0, 0);
-        resolve(canvas.toDataURL("image/png"));
-      } catch (error) {
-        reject(error);
-      }
-    });
-  }
-}

src/routes/+page.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import type { Panel, TextItem } from "$lib/types/panel";
+  import type { Stage as KonvaStage } from "konva/lib/Stage";
   import { onMount } from "svelte";
   import { exportService } from "../services/exportService";
   import { imageService } from "../services/imageService";
@@ -102,8 +103,8 @@
     panels = panelService.updatePanelsFromTexts(texts, panels, backgroundImage!);
   }
 
-  async function handleDownload(panel: Panel) {
+  async function handleDownload(panel: Panel, konvaStage: KonvaStage) {
-    await exportService.handleDownload(panel);
+    await exportService.handleDownload(panel, konvaStage);
   }
 
   async function handleDownloadAll() {
@@ -112,7 +113,7 @@
 </script>
 
 <AppContainer
-  errorMessage={exportService.getErrorMessage()}
+  errorMessage={exportService.getErrorMessage() || undefined}
   {uploadedImage}
   {texts}
   {backgroundImage}

src/services/exportService.ts

@@ -1,55 +1,115 @@
+import pkg from "file-saver";
+import type { Stage } from "konva/lib/Stage";
+import { ImageError } from "../lib/types/errors";
 import type { Panel } from "../lib/types/panel";
-import { exportService as exportPanelService } from "../lib/services/exportService";
+import { handleError, logError } from "../lib/utils/errorHandler";
-import { setLoading } from "../stores/uiStore";
+const { saveAs } = pkg;
+
+export interface ExportResult {
+  success: boolean;
+  error?: string;
+}
 
 export class ExportService {
-  private static instance: ExportService;
+  /**
-  private errorMessage: string | undefined = undefined;
+   * Экспортирует панель в изображение и сохраняет её
-
+   */
-  private constructor() {}
+  async exportPanel(panel: Panel, konvaStage: Stage, filename?: string): Promise<ExportResult> {
-
-  static getInstance(): ExportService {
-    if (!ExportService.instance) {
-      ExportService.instance = new ExportService();
-    }
-    return ExportService.instance;
-  }
-
-  getErrorMessage(): string | undefined {
-    return this.errorMessage;
-  }
-
-  setErrorMessage(message: string | undefined): void {
-    this.errorMessage = message;
-  }
-
-  async handleDownload(panel: Panel): Promise<void> {
     try {
-      setLoading(true);
+      if (!konvaStage) {
-      const result = await exportPanelService.exportPanel(panel);
+        throw new ImageError("Konva Stage не передан для экспорта");
-
-      if (!result.success) {
-        this.errorMessage = result.error || "Ошибка экспорта панели";
       }
+
+      // Используем toBlob метод Konva Stage напрямую
+      const blob = await this.exportKonvaStageToBlob(konvaStage);
+
+      if (!blob) {
+        throw new ImageError("Не удалось создать изображение");
+      }
+
+      const defaultFilename = `twitch-panel-${panel.id}.png`;
+      saveAs(blob, filename || defaultFilename);
+
+      return {
+        success: true,
+      };
     } catch (error) {
-      this.errorMessage = error instanceof Error ? error.message : "Ошибка экспорта панели";
+      logError(error, "Panel export failed");
-    } finally {
+      return {
-      setLoading(false);
+        success: false,
+        error: handleError(error, "Ошибка экспорта панели"),
+      };
     }
   }
 
+  /**
+   * Экспортирует Konva Stage в Blob используя встроенный метод toBlob
+   */
+  private async exportKonvaStageToBlob(konvaStage: Stage): Promise<Blob | null> {
+    if (!konvaStage || typeof konvaStage.toBlob !== "function") {
+      throw new ImageError("Konva Stage не найден или не поддерживает toBlob");
+    }
+
+    return new Promise((resolve, reject) => {
+      konvaStage.toBlob({
+        callback: (blob: Blob | null) => {
+          if (blob) {
+            resolve(blob);
+          } else {
+            reject(new ImageError("Не удалось создать изображение из Konva Stage"));
+          }
+        },
+      });
+    });
+  }
+
+  /**
+   * Экспортирует несколько панелей в ZIP архив
+   * (будет реализовано позже для batch download)
+   */
+  async exportPanels(panels: Panel[]): Promise<ExportResult> {
+    // TODO: Реализовать пакетный экспорт с использованием JSZip
+    return {
+      success: false,
+      error: "Пакетный экспорт еще не реализован",
+    };
+  }
+
+  /**
+   * Обработчик для скачивания одной панели
+   * Этот метод должен быть вызван из компонента PanelPreview с передачей konvaStage
+   */
+  async handleDownload(panel: Panel, konvaStage: Stage): Promise<void> {
+    const result = await this.exportPanel(panel, konvaStage);
+    if (!result.success) {
+      throw new Error(result.error || "Ошибка экспорта панели");
+    }
+  }
+
+  /**
+   * Обработчик для скачивания всех панелей
+   */
   async handleDownloadAll(panels: Panel[]): Promise<void> {
-    try {
+    const result = await this.exportPanels(panels);
-      setLoading(true);
+    if (!result.success) {
-      for (const panel of panels) {
+      throw new Error(result.error || "Ошибка экспорта панелей");
-        await exportPanelService.exportPanel(panel);
-      }
-    } catch (error) {
-      this.errorMessage = error instanceof Error ? error.message : "Ошибка экспорта панелей";
-    } finally {
-      setLoading(false);
     }
   }
+
+  /**
+   * Получить сообщение об ошибке
+   */
+  getErrorMessage(): string | null {
+    return null; // Реализовать при необходимости
+  }
+
+  /**
+   * Установить сообщение об ошибке
+   */
+  setErrorMessage(message: string): void {
+    // Реализовать при необходимости
+    console.error("ExportService error:", message);
+  }
 }
 
-export const exportService = ExportService.getInstance();
+export const exportService = new ExportService();

src/services/imageService.ts

@@ -41,6 +41,93 @@ export class ImageService {
   handleCropCancel(): void {
     setCurrentStep("text");
   }
+
+  async handleFileUpload(file: File): Promise<any> {
+    // Convert file to base64
+    return new Promise((resolve, reject) => {
+      const reader = new FileReader();
+      reader.onload = () =>
+        resolve({
+          success: true,
+          image: reader.result as string,
+        });
+      reader.onerror = () =>
+        reject({
+          success: false,
+          error: "Ошибка чтения файла",
+        });
+      reader.readAsDataURL(file);
+    });
+  }
+
+  async handlePasteUpload(pasteEvent: ClipboardEvent): Promise<any> {
+    const items = pasteEvent.clipboardData?.items;
+    if (!items || items.length === 0) {
+      return {
+        success: false,
+        error: "В буфере обмена не найдено изображений",
+      };
+    }
+
+    // Find image item
+    let imageItem: DataTransferItem | undefined = undefined;
+    for (let i = 0; i < items.length; i++) {
+      if (items[i].type.indexOf("image") !== -1) {
+        imageItem = items[i];
+        break;
+      }
+    }
+
+    if (!imageItem) {
+      return {
+        success: false,
+        error: "В буфере обмена не найдено изображений",
+      };
+    }
+
+    // Get file from clipboard item
+    const file = imageItem.getAsFile();
+    if (!file) {
+      return {
+        success: false,
+        error: "Не удалось получить файл из буфера обмена",
+      };
+    }
+
+    return this.handleFileUpload(file);
+  }
+
+  async handleUrlUpload(url: string): Promise<any> {
+    try {
+      const response = await fetch(url);
+      if (!response.ok) {
+        return {
+          success: false,
+          error: "Не удалось загрузить изображение по URL",
+        };
+      }
+      const blob = await response.blob();
+      return new Promise((resolve, reject) => {
+        const reader = new FileReader();
+        reader.onload = () =>
+          resolve({
+            success: true,
+            image: reader.result as string,
+          });
+        reader.onerror = () =>
+          reject({
+            success: false,
+            error: "Ошибка чтения изображения",
+          });
+        reader.readAsDataURL(blob);
+      });
+    } catch (error) {
+      return {
+        success: false,
+        error: "Ошибка загрузки изображения по URL",
+      };
+    }
+  }
 }
 
 export const imageService = ImageService.getInstance();