fix: resolve crop errors

package.json

@@ -1,33 +1,33 @@
-{
-	"name": "twitch-panels",
-	"private": true,
-	"version": "0.0.1",
-	"type": "module",
-	"scripts": {
-		"dev": "vite dev",
-		"build": "vite build",
-		"preview": "vite preview",
-		"prepare": "svelte-kit sync || echo ''",
-		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
-		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch"
-	},
-	"devDependencies": {
-		"@sveltejs/adapter-auto": "^7.0.0",
-		"@sveltejs/adapter-static": "^3.0.10",
-		"@sveltejs/kit": "^2.50.1",
-		"@sveltejs/vite-plugin-svelte": "^6.2.4",
-		"@types/node": "^25.1.0",
-		"svelte": "^5.48.2",
-		"svelte-check": "^4.3.5",
-		"typescript": "^5.9.3",
-		"vite": "^7.3.1"
-	},
-	"dependencies": {
-		"@types/cropperjs": "^1.1.5",
-		"@types/uuid": "^10.0.0",
-		"cropperjs": "^2.1.0",
-		"file-saver": "^2.0.5",
-		"svelte-konva": "^1.0.1",
-		"uuid": "^13.0.0"
-	}
-}
+{
+	"name": "twitch-panels",
+	"private": true,
+	"version": "0.0.1",
+	"type": "module",
+	"scripts": {
+		"dev": "vite dev",
+		"build": "vite build",
+		"preview": "vite preview",
+		"prepare": "svelte-kit sync || echo ''",
+		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch"
+	},
+	"devDependencies": {
+		"@sveltejs/adapter-auto": "^7.0.0",
+		"@sveltejs/adapter-static": "^3.0.10",
+		"@sveltejs/kit": "^2.50.1",
+		"@sveltejs/vite-plugin-svelte": "^6.2.4",
+		"@types/node": "^25.1.0",
+		"svelte": "^5.48.2",
+		"svelte-check": "^4.3.5",
+		"typescript": "^5.9.3",
+		"vite": "^7.3.1"
+	},
+	"dependencies": {
+		"@types/cropperjs": "^1.1.5",
+		"@types/uuid": "^10.0.0",
+		"cropperjs": "^2.1.0",
+		"file-saver": "^2.0.5",
+		"svelte-konva": "^1.0.1",
+		"uuid": "^13.0.0"
+	}
+}

src/components/ImageCropper.svelte

@@ -88,22 +88,33 @@
       errorMessage = null;
       setLoading(true);
 
-      console.log("Calling getCropperImage");
-      const image = cropper.getCropperImage();
-      console.log("Image result:", image);
-      console.log("Image type:", typeof image);
+      console.log("Calling getCropperCanvas");
+      const cropperCanvasElement = cropper.getCropperCanvas();
+      console.log("CropperCanvas result:", cropperCanvasElement);
+      console.log("CropperCanvas type:", typeof cropperCanvasElement);
 
-      if (!image) {
+      if (!cropperCanvasElement) {
         throw new Error("Не удалось получить обрезанное изображение");
       }
 
-      // Проверяем, есть ли у image метод toDataURL
-      if (typeof image.toDataURL === "function") {
-        const croppedImage = image.toDataURL("image/png");
-      } else {
-        throw new Error("Изображение не имеет метода toDataURL");
+      // Используем метод $toCanvas для получения HTMLCanvasElement
+      const canvas = await cropperCanvasElement.$toCanvas({
+        width: 320,
+        imageSmoothingEnabled: true,
+        imageSmoothingQuality: "high",
+      });
+      console.log("Canvas result:", canvas);
+      console.log("Canvas type:", typeof canvas);
+      console.log("Canvas.toDataURL:", typeof canvas?.toDataURL);
+
+      if (!canvas) {
+        throw new Error("Не удалось получить canvas");
       }
 
+      // Теперь canvas - это обычный HTMLCanvasElement
+      const croppedImage = canvas.toDataURL("image/png");
+      console.log("Cropped image:", croppedImage);
+
       // Validate cropped image
       const cropResult: ImageCropResult = {
         success: true,