From 8f3facf08a58417f5076f0664cd9e93dcae8071e Mon Sep 17 00:00:00 2001
From: Nastya <nastyab015@yandex.ru>
Date: Sun, 10 Nov 2024 21:42:50 +0300
Subject: [PATCH] =?UTF-8?q?=D0=BA=D0=BE=D1=80=D1=80=D0=B5=D0=BA=D1=82?=
 =?UTF-8?q?=D0=BD=D0=B0=D1=8F=20=D0=BE=D0=B1=D1=80=D0=B5=D0=B7=D0=BA=D0=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../CropModal/utils/imageManipulation.ts      | 40 +++++++------------
 1 file changed, 14 insertions(+), 26 deletions(-)

diff --git a/src/ui_kit/Modal/CropModal/utils/imageManipulation.ts b/src/ui_kit/Modal/CropModal/utils/imageManipulation.ts
index 7cd5ec89..893f3f7d 100644
--- a/src/ui_kit/Modal/CropModal/utils/imageManipulation.ts
+++ b/src/ui_kit/Modal/CropModal/utils/imageManipulation.ts
@@ -31,37 +31,25 @@ export function getModifiedImageBlob(
     const ctx = canvas.getContext("2d");
     if (!ctx) return reject(new Error("No 2d context"));
 
-    const scale = 1;
-    const scaleX = image.naturalWidth / image.width;
-    const scaleY = image.naturalHeight / image.height;
-    const pixelRatio = window.devicePixelRatio;
+    // Пропорции исходного изображения
+    const originalWidth = image.width;
+    const originalHeight = image.height;
 
-    canvas.width = Math.floor(crop.width * scaleX * pixelRatio);
-    canvas.height = Math.floor(crop.height * scaleY * pixelRatio);
+    // Вычисляем размеры для обрезки в пикселях
+    const cropWidth = (crop.width / 100) * originalWidth;
+    const cropHeight = (crop.height / 100) * originalHeight;
+    const cropX = (crop.x / 100) * originalWidth;
+    const cropY = (crop.y / 100) * originalHeight;
 
-    ctx.scale(pixelRatio, pixelRatio);
-    ctx.imageSmoothingQuality = "high";
+    // Устанавливаем размеры канваса
+    canvas.width = cropWidth;
+    canvas.height = cropHeight;
 
-    const cropX = crop.x * scaleX;
-    const cropY = crop.y * scaleY;
-
-    const centerX = image.naturalWidth / 2;
-    const centerY = image.naturalHeight / 2;
-
-    ctx.translate(-cropX, -cropY);
-    ctx.translate(centerX, centerY);
-    ctx.scale(scale, scale);
-    ctx.translate(-centerX, -centerY);
+    // Обрезаем изображение
     ctx.drawImage(
       image,
-      0,
-      0,
-      image.naturalWidth,
-      image.naturalHeight,
-      0,
-      0,
-      image.naturalWidth,
-      image.naturalHeight,
+      cropX, cropY, cropWidth, cropHeight, // Исходная область (x, y, width, height)
+      0, 0, cropWidth, cropHeight           // Целевая область (x, y, width, height)
     );
 
     if (darken > 0) {