корректная обрезка

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 originalWidth = image.width;
-    const scaleY = image.naturalHeight / image.height;
+    const originalHeight = image.height;
-    const pixelRatio = window.devicePixelRatio;
 
-    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,
+      cropX, cropY, cropWidth, cropHeight, // Исходная область (x, y, width, height)
-      0,
+      0, 0, cropWidth, cropHeight           // Целевая область (x, y, width, height)
-      image.naturalWidth,
-      image.naturalHeight,
-      0,
-      0,
-      image.naturalWidth,
-      image.naturalHeight,
     );
 
     if (darken > 0) {