Ku6epXBOCTuK/twitch-panels
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Ku6epXBOCTuK
2026-02-04 23:27:07 +05:00
parent c098c21077
commit 9b1d24def2
14 changed files with 251 additions and 377 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/image/ImageCropper.svelte
-3
View File
@@ -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 -3
View File
@@ -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";
let imageService = new ImageService();
import { imageService } from "../../services/imageService";
interface Props {
onImageSelect: (image: string) => void;
src/components/layout/AppContainer.svelte
+1 -1
View File
@@ -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
+1 -1
View File
@@ -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
+1 -1
View File
@@ -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
+48 -5
View File
@@ -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) {
onDownload();
console.log("[PanelPreview] handleDownload called");
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
+4 -3
View File
@@ -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
-100
View File
@@ -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
-214
View File
@@ -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
+4 -3
View File
@@ -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) {
await exportService.handleDownload(panel);
async function handleDownload(panel: Panel, konvaStage: KonvaStage) {
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
+101 -41
View File
@@ -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 { setLoading } from "../stores/uiStore";
import { handleError, logError } from "../lib/utils/errorHandler";
const { saveAs } = pkg;
export interface ExportResult {
success: boolean;
error?: string;
}
export class ExportService {
private static instance: ExportService;
private errorMessage: string | undefined = undefined;
private constructor() {}
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> {
/**
* Экспортирует панель в изображение и сохраняет её
*/
async exportPanel(panel: Panel, konvaStage: Stage, filename?: string): Promise<ExportResult> {
try {
setLoading(true);
const result = await exportPanelService.exportPanel(panel);
if (!result.success) {
this.errorMessage = result.error || "Ошибка экспорта панели";
if (!konvaStage) {
throw new ImageError("Konva Stage не передан для экспорта");
}
// Используем 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 : "Ошибка экспорта панели";
} finally {
setLoading(false);
logError(error, "Panel export failed");
return {
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 {
setLoading(true);
for (const panel of panels) {
await exportPanelService.exportPanel(panel);
}
} catch (error) {
this.errorMessage = error instanceof Error ? error.message : "Ошибка экспорта панелей";
} finally {
setLoading(false);
const result = await this.exportPanels(panels);
if (!result.success) {
throw new Error(result.error || "Ошибка экспорта панелей");
}
}
/**
* Получить сообщение об ошибке
*/
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
+87
View File
@@ -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();