modal update

src/ui_kit/Modal/CropModal2.tsx

@@ -0,0 +1,277 @@
+import React, { useState, useRef, FC } from "react";
+import ReactCrop, { Crop, PixelCrop } from "react-image-crop";
+import { Box, Button, Modal, Slider, Typography, useMediaQuery, useTheme } from "@mui/material";
+
+import { canvasPreview } from "./utils/canvasPreview";
+import { useDebounceEffect } from "./utils/useDebounceEffect";
+
+import { ResetIcon } from "@icons/ResetIcon";
+
+import "react-image-crop/dist/ReactCrop.css";
+
+interface Iprops {
+  opened: boolean;
+  onClose: React.Dispatch<React.SetStateAction<boolean>>;
+}
+
+export const CropModal2: FC<Iprops> = ({ opened, onClose }) => {
+  const [imgSrc, setImgSrc] = useState("");
+  const imgRef = useRef<HTMLImageElement>(null);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const previewCanvasRef = useRef<HTMLCanvasElement>(null);
+  const hiddenAnchorRef = useRef<HTMLAnchorElement>(null);
+  const blobUrlRef = useRef("");
+  const [crop, setCrop] = useState<Crop>();
+  const [completedCrop, setCompletedCrop] = useState<PixelCrop>();
+  const [rotate, setRotate] = useState(0);
+  const [imageSize, setImageSize] = useState(580);
+  const [darken, setDarken] = useState(0);
+
+  const theme = useTheme();
+  const isMobile = useMediaQuery(theme.breakpoints.down(786));
+
+  const style = {
+    position: "absolute",
+    top: "50%",
+    left: "50%",
+    transform: "translate(-50%, -50%)",
+    width: isMobile ? "343px" : "620px",
+    bgcolor: "background.paper",
+    boxShadow: 24,
+    padding: "20px",
+    borderRadius: "8px",
+  };
+
+  const styleSlider = {
+    width: isMobile ? "350px" : "250px",
+    color: "#7E2AEA",
+    height: "12px",
+    "& .MuiSlider-track": {
+      border: "none",
+    },
+    "& .MuiSlider-rail": {
+      backgroundColor: "#F2F3F7",
+      border: `1px solid "#9A9AAF"`,
+    },
+    "& .MuiSlider-thumb": {
+      height: 26,
+      width: 26,
+      border: `6px solid #7E2AEA`,
+      backgroundColor: "white",
+      boxShadow: `0px 0px 0px 3px white,
+                    0px 4px 4px 3px #C3C8DD`,
+      "&:focus, &:hover, &.Mui-active, &.Mui-focusVisible": {
+        boxShadow: `0px 0px 0px 3px white,
+                        0px 4px 4px 3px #C3C8DD`,
+      },
+    },
+  };
+
+  const rotateImage = () => {
+    const newRotation = (rotate + 90) % 360;
+    setRotate(newRotation);
+  };
+
+  const onSelectFile = (event: React.ChangeEvent<HTMLInputElement>) => {
+    if (event.target.files && event.target.files.length > 0) {
+      setCrop(undefined);
+      const reader = new FileReader();
+      reader.addEventListener("load", () => setImgSrc(reader.result?.toString() || ""));
+      reader.readAsDataURL(event.target.files[0]);
+    }
+  };
+
+  const onDownloadCropClick = () => {
+    if (!previewCanvasRef.current) {
+      throw new Error("Crop canvas does not exist");
+    }
+
+    const canvasCopy = document.createElement("canvas");
+    const ctx = canvasCopy.getContext("2d");
+    canvasCopy.width = previewCanvasRef.current.width;
+    canvasCopy.height = previewCanvasRef.current.height;
+    ctx!.filter = `brightness(${100 - darken}%)`;
+    ctx!.drawImage(previewCanvasRef.current, 0, 0);
+
+    canvasCopy.toBlob((blob) => {
+      if (!blob) {
+        throw new Error("Failed to create blob");
+      }
+      if (blobUrlRef.current) {
+        URL.revokeObjectURL(blobUrlRef.current);
+      }
+      blobUrlRef.current = URL.createObjectURL(blob);
+      hiddenAnchorRef.current!.href = blobUrlRef.current;
+      hiddenAnchorRef.current!.click();
+    });
+  };
+
+  useDebounceEffect(
+    async () => {
+      if (completedCrop?.width && completedCrop?.height && imgRef.current && previewCanvasRef.current) {
+        canvasPreview(imgRef.current, previewCanvasRef.current, completedCrop, rotate);
+      }
+    },
+    100,
+    [completedCrop, rotate]
+  );
+
+  return (
+    <>
+      {completedCrop && (
+        <div>
+          <canvas
+            ref={previewCanvasRef}
+            style={{
+              display: "none",
+              zIndex: "-999",
+              border: "1px solid black",
+              objectFit: "contain",
+              width: completedCrop.width,
+              height: completedCrop.height,
+            }}
+          />
+        </div>
+      )}
+      <div>
+        <a
+          href="#hidden"
+          ref={hiddenAnchorRef}
+          download
+          style={{
+            display: "none",
+          }}
+        >
+          Hidden download
+        </a>
+      </div>
+      <Modal
+        open={opened}
+        onClose={onClose}
+        aria-labelledby="modal-modal-title"
+        aria-describedby="modal-modal-description"
+      >
+        <Box sx={style}>
+          <Box
+            sx={{
+              height: "320px",
+              padding: "10px",
+              backgroundSize: "cover",
+              backgroundRepeat: "no-repeat",
+
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+            }}
+          >
+            {!!imgSrc && (
+              <ReactCrop
+                crop={crop}
+                onChange={(_, percentCrop) => setCrop(percentCrop)}
+                onComplete={(c) => setCompletedCrop(c)}
+                maxWidth={500}
+                maxHeight={320}
+              >
+                <img
+                  ref={imgRef}
+                  alt="Crop me"
+                  src={imgSrc}
+                  style={{
+                    filter: `brightness(${100 - darken}%)`,
+                    transform: ` rotate(${rotate}deg)`,
+                    maxWidth: "580px",
+                    maxHeight: "320px",
+                  }}
+                  width={580 * (imageSize / 200)}
+                />
+              </ReactCrop>
+            )}
+          </Box>
+
+          <Box
+            sx={{
+              color: "#7E2AEA",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              fontSize: "16xp",
+              fontWeight: "600",
+              marginBottom: "50px",
+            }}
+          >
+            <Typography sx={{ color: "#7E2AEA", lineHeight: "0px" }}>
+              {crop?.width ? Math.round(crop.width) + "px" : ""}
+            </Typography>
+            <Typography sx={{ color: "#7E2AEA", lineHeight: "0px" }}>
+              {crop?.width ? Math.round(crop.width) + "px" : ""}
+            </Typography>
+          </Box>
+
+          <Box sx={{ display: isMobile ? "block" : "flex", alignItems: "end", justifyContent: "space-between" }}>
+            <ResetIcon onClick={rotateImage} style={{ marginBottom: "10px", cursor: "pointer" }} />
+            <Box>
+              <Typography sx={{ color: "#9A9AAF", fontSize: "16px" }}>Размер</Typography>
+              <Slider
+                sx={styleSlider}
+                value={imageSize}
+                min={50}
+                max={200}
+                step={1}
+                onChange={(_, newValue) => {
+                  setImageSize(newValue as number);
+                }}
+              />
+            </Box>
+            <Box>
+              <Typography sx={{ color: "#9A9AAF", fontSize: "16px" }}>Затемнение</Typography>
+              <Slider
+                sx={styleSlider}
+                value={darken}
+                min={0}
+                max={100}
+                step={1}
+                onChange={(_, newValue) => setDarken(newValue as number)}
+              />
+            </Box>
+          </Box>
+          <Box sx={{ marginTop: "40px", width: "100%", display: "flex", justifyContent: "end" }}>
+            <input
+              style={{ display: "none", zIndex: "-999" }}
+              ref={fileInputRef}
+              type="file"
+              accept="image/*"
+              onChange={onSelectFile}
+            />
+            <Button
+              onClick={() => fileInputRef.current?.click()}
+              disableRipple
+              sx={{
+                width: "215px",
+                height: "48px",
+                color: "#7E2AEA",
+                borderRadius: "8px",
+                border: "1px solid #7E2AEA",
+                marginRight: "10px",
+              }}
+            >
+              Загрузить оригинал
+            </Button>
+            <Button
+              onClick={onDownloadCropClick}
+              disableRipple
+              sx={{
+                width: "149px",
+                height: "48px",
+                color: "white",
+                background: "#7E2AEA",
+                borderRadius: "8px",
+              }}
+            >
+              Обрезать
+            </Button>
+          </Box>
+        </Box>
+      </Modal>
+    </>
+  );
+};

src/ui_kit/Modal/CroppingModal.tsx

@@ -17,7 +17,7 @@ export const CroppingModal: FC<Iprops> = ({ opened, onClose }) => {
   const isMobile = useMediaQuery(theme.breakpoints.down(786));
 
   const style = {
-    position: "absolute" as "absolute",
+    position: "absolute",
     top: "50%",
     left: "50%",
     transform: "translate(-50%, -50%)",
@@ -58,12 +58,22 @@ export const CroppingModal: FC<Iprops> = ({ opened, onClose }) => {
   const [completedCrop, setCompletedCrop] = useState<Crop | null>(null);
   const [imageSize, setImageSize] = useState(580);
   const [darken, setDarken] = useState(0);
-  const fileInputRef = useRef<HTMLInputElement>(null);
+  const [croppedImageUrl, setCroppedImageUrl] = useState<string | null>(null);
 
-  console.log(src);
+  const fileInputRef = useRef<HTMLInputElement>(null);
 
   const onCropComplete = (crop: Crop) => {
     setCompletedCrop(crop);
+
+    if (src) {
+      getCroppedAndDarkenedImg(src as string, crop, "cropped.jpeg", darken, rotation)
+        .then((croppedImageUrl) => {
+          setCroppedImageUrl(croppedImageUrl);
+        })
+        .catch((error) => {
+          console.error("Ошибка при обрезке и затемнении изображения:", error);
+        });
+    }
   };
 
   const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -71,7 +81,7 @@ export const CroppingModal: FC<Iprops> = ({ opened, onClose }) => {
       const file = e.target.files[0];
       const reader = new FileReader();
       reader.onload = (event) => {
-        if (event.target && event.target.result) {
+        if (event.target?.result) {
           setSrc(event.target.result);
         }
       };
@@ -81,16 +91,20 @@ export const CroppingModal: FC<Iprops> = ({ opened, onClose }) => {
 
   const handleDownloadClick = async () => {
     if (completedCrop && src) {
-      const croppedImageUrl = await getCroppedAndDarkenedImg(src, completedCrop, "cropped.jpeg", darken);
+      const croppedImageUrl = await getCroppedAndDarkenedImg(src, completedCrop, "cropped.jpeg", darken, rotation);
+      setCroppedImageUrl(croppedImageUrl);
       saveAs(croppedImageUrl, "cropped-image.jpeg");
     }
   };
 
+  const [widthImg, setWidthImg] = useState<number>(580);
+
   const getCroppedAndDarkenedImg = (
     image: string | ArrayBuffer,
     crop: Crop,
     fileName: string,
-    darken: number
+    darken: number,
+    rotation: number
   ): Promise<string> => {
     const img = new Image();
     img.src = image as string;
@@ -99,17 +113,13 @@ export const CroppingModal: FC<Iprops> = ({ opened, onClose }) => {
     let scaleY = 219 / 320;
 
     if (img.naturalWidth) {
-      scaleX = img.naturalWidth / 580;
+      scaleX = img.naturalWidth / widthImg;
     }
 
     if (img.naturalHeight) {
       scaleY = img.naturalHeight / 320;
     }
 
-    console.log(scaleX);
-
-    console.log(scaleY);
-
     const canvas = document.createElement("canvas");
     canvas.width = crop.width!;
     canvas.height = crop.height!;
@@ -119,19 +129,24 @@ export const CroppingModal: FC<Iprops> = ({ opened, onClose }) => {
       throw new Error("Canvas context is null");
     }
 
+    // Применяем вращение к canvas
+    ctx.translate(crop.width / 2, crop.height / 2);
+    ctx.rotate((rotation * Math.PI) / 180);
+    ctx.translate(-crop.width / 2, -crop.height / 2);
+
     ctx.drawImage(
       img,
-      crop.x! * scaleX,
+      crop.x * scaleX,
-      crop.y! * scaleY,
+      crop.y * scaleY,
-      crop.width! * scaleX,
+      crop.width * scaleX,
-      crop.height! * scaleY,
+      crop.height * scaleY,
       0,
       0,
-      crop.width!,
+      crop.width,
-      crop.height!
+      crop.height
     );
 
-    const imageData = ctx.getImageData(0, 0, crop.width!, crop.height!);
+    const imageData = ctx.getImageData(0, 0, crop.width, crop.height);
 
     const newImageData = imageData.data.map((value, index) => {
       if ((index + 1) % 4 === 0) {
@@ -158,136 +173,172 @@ export const CroppingModal: FC<Iprops> = ({ opened, onClose }) => {
     });
   };
 
+  const [rotation, setRotation] = useState(0);
+
+  const rotateImage = () => {
+    const newRotation = (rotation + 90) % 360;
+    setRotation(newRotation);
+  };
+
+  const handleSliderChange = (newValue: number) => {
+    setDarken(newValue);
+
+    getCroppedAndDarkenedImg(src as string, completedCrop!, "cropped.jpeg", newValue, rotation);
+  };
+
   return (
-    <Modal
+    <>
-      open={opened}
+      <img
-      onClose={onClose}
+        src={croppedImageUrl as string}
-      aria-labelledby="modal-modal-title"
+        alt="Cropped Area"
-      aria-describedby="modal-modal-description"
+        style={{
-    >
+          position: "absolute",
-      <Box sx={style}>
+          ...completedCrop,
-        <Box
+        }}
-          sx={{
+      />
-            height: "320px",
+      <Modal
-            padding: "10px",
+        open={opened}
-            backgroundSize: "cover",
+        onClose={onClose}
-            backgroundRepeat: "no-repeat",
+        aria-labelledby="modal-modal-title"
-
+        aria-describedby="modal-modal-description"
-            display: "flex",
+      >
-            alignItems: "center",
+        <Box sx={style}>
-            justifyContent: "center",
+          <Box
-          }}
+            sx={{
-        >
+              height: "320px",
-          <ReactCrop crop={crop} onChange={(newCrop) => setCrop(newCrop)} onComplete={onCropComplete}>
+              padding: "10px",
-            {src && (
+              backgroundSize: "cover",
-              <img
+              backgroundRepeat: "no-repeat",
-                src={src as string}
+
-                style={{
+              display: "flex",
-                  filter: `brightness(${100 - darken}%)`,
+              alignItems: "center",
-                  maxWidth: "580px",
+              justifyContent: "center",
-                }}
+            }}
-                width={580 * (imageSize / 200)}
+          >
-                height={320}
+            <ReactCrop
-                alt="Crop"
+              minWidth={75}
-              />
+              minHeight={75}
-            )}
+              maxWidth={580}
-          </ReactCrop>
+              maxHeight={320}
-        </Box>
+              crop={crop}
-
+              onChange={(newCrop) => setCrop(newCrop)}
-        <Box
+              onComplete={onCropComplete}
-          sx={{
+            >
-            color: "#7E2AEA",
+              {src && (
-            display: "flex",
+                <img
-            alignItems: "center",
+                  src={src as string}
-            justifyContent: "center",
+                  onClick={(e) => console.log(e.currentTarget)}
-            fontSize: "16xp",
+                  style={{
-            fontWeight: "600",
+                    filter: `brightness(${100 - darken}%)`,
-            marginBottom: "50px",
+                    maxWidth: "580px",
-          }}
+                    transform: `rotate(${rotation}deg)`,
-        >
+                  }}
-          <Typography sx={{ color: "#7E2AEA", lineHeight: "0px" }}>{Math.round(crop.width)}</Typography>x
+                  width={580 * (imageSize / 200)}
-          <Typography sx={{ color: "#7E2AEA", lineHeight: "0px" }}>{Math.round(crop.width)}</Typography>
+                  height={320}
-          px
+                  alt="Crop"
-        </Box>
+                />
-
+              )}
-        <Box sx={{ display: isMobile ? "block" : "flex", alignItems: "end", justifyContent: "space-between" }}>
+            </ReactCrop>
-          <ResetIcon
+          </Box>
-            onClick={() => {
+
-              setCrop((prevCrop: Crop) => ({
+          <Box
-                ...prevCrop,
-                unit: "px",
-                x: 210,
-                y: 10,
-                width: 210,
-                height: 300,
-              }));
-
-              setDarken(0);
-              setImageSize(580);
-            }}
-            style={{ marginBottom: "10px", cursor: "pointer" }}
-          />
-          <Box>
-            <Typography sx={{ color: "#9A9AAF", fontSize: "16px" }}>Размер</Typography>
-            <Slider
-              sx={styleSlider}
-              value={imageSize}
-              min={50}
-              max={200}
-              step={1}
-              onChange={(_, newValue) => setImageSize(newValue as number)}
-            />
-          </Box>
-          <Box>
-            <Typography sx={{ color: "#9A9AAF", fontSize: "16px" }}>Затемнение</Typography>
-            <Slider
-              sx={styleSlider}
-              value={darken}
-              min={0}
-              max={100}
-              step={1}
-              onChange={(_, newValue) => setDarken(newValue as number)}
-            />
-          </Box>
-        </Box>
-        <Box sx={{ marginTop: "40px", width: "100%", display: "flex", justifyContent: "end" }}>
-          <input
-            ref={fileInputRef}
-            type="file"
-            accept="image/*"
-            id="fileInput"
-            style={{ display: "none" }}
-            onChange={handleFileChange}
-          />
-          <Button
-            onClick={() => fileInputRef.current?.click()}
-            disableRipple
             sx={{
-              width: "215px",
-              height: "48px",
               color: "#7E2AEA",
-              borderRadius: "8px",
+              display: "flex",
-              border: "1px solid #7E2AEA",
+              alignItems: "center",
-              marginRight: "10px",
+              justifyContent: "center",
+              fontSize: "16xp",
+              fontWeight: "600",
+              marginBottom: "50px",
             }}
           >
-            Загрузить оригинал
+            <Typography sx={{ color: "#7E2AEA", lineHeight: "0px" }}>{Math.round(crop.width)}</Typography>x
-          </Button>
+            <Typography sx={{ color: "#7E2AEA", lineHeight: "0px" }}>{Math.round(crop.width)}</Typography>
-          <Button
+            px
-            onClick={handleDownloadClick}
+          </Box>
-            disableRipple
+          <button onClick={rotateImage}>Повернуть на 90 градусов</button>
-            sx={{
+          <Box sx={{ display: isMobile ? "block" : "flex", alignItems: "end", justifyContent: "space-between" }}>
-              width: "149px",
+            <ResetIcon
-              height: "48px",
+              onClick={() => {
-              color: "white",
+                setCrop((prevCrop: Crop) => ({
-              background: "#7E2AEA",
+                  ...prevCrop,
-              borderRadius: "8px",
+                  unit: "px",
-            }}
+                  x: 210,
-          >
+                  y: 10,
-            Обрезать
+                  width: 210,
-          </Button>
+                  height: 300,
+                }));
+                setRotation(0);
+                setDarken(0);
+                setImageSize(580);
+              }}
+              style={{ marginBottom: "10px", cursor: "pointer" }}
+            />
+            <Box>
+              <Typography sx={{ color: "#9A9AAF", fontSize: "16px" }}>Размер</Typography>
+              <Slider
+                sx={styleSlider}
+                value={imageSize}
+                min={50}
+                max={200}
+                step={1}
+                onChange={(_, newValue) => {
+                  setImageSize(newValue as number);
+                  setWidthImg(580 * (imageSize / 200));
+                }}
+              />
+            </Box>
+            <Box>
+              <Typography sx={{ color: "#9A9AAF", fontSize: "16px" }}>Затемнение</Typography>
+              <Slider
+                sx={styleSlider}
+                value={darken}
+                min={0}
+                max={100}
+                step={1}
+                onChange={(_, newValue) => handleSliderChange(newValue as number)}
+              />
+            </Box>
+          </Box>
+          <Box sx={{ marginTop: "40px", width: "100%", display: "flex", justifyContent: "end" }}>
+            <input
+              ref={fileInputRef}
+              type="file"
+              accept="image/*"
+              id="fileInput"
+              style={{ display: "none" }}
+              onChange={handleFileChange}
+            />
+            <Button
+              onClick={() => fileInputRef.current?.click()}
+              disableRipple
+              sx={{
+                width: "215px",
+                height: "48px",
+                color: "#7E2AEA",
+                borderRadius: "8px",
+                border: "1px solid #7E2AEA",
+                marginRight: "10px",
+              }}
+            >
+              Загрузить оригинал
+            </Button>
+            <Button
+              onClick={handleDownloadClick}
+              disableRipple
+              sx={{
+                width: "149px",
+                height: "48px",
+                color: "white",
+                background: "#7E2AEA",
+                borderRadius: "8px",
+              }}
+            >
+              Обрезать
+            </Button>
+          </Box>
         </Box>
-      </Box>
+      </Modal>
-    </Modal>
+    </>
   );
 };

src/ui_kit/Modal/ImageCrop.tsx

@@ -1,13 +1,15 @@
 import { Box, Button } from "@mui/material";
 import { FC, useState } from "react";
 import { CroppingModal } from "./CroppingModal";
+import { CropModal2 } from "./CropModal2";
 
 const ImageCrop: FC = () => {
   const [opened, setOpened] = useState<boolean>(false);
   return (
     <Box>
-      <CroppingModal opened={opened} onClose={() => setOpened(false)} />
+      {/* <CroppingModal opened={opened} onClose={() => setOpened(false)} /> */}
       <Button onClick={() => setOpened(true)}>Открыть модалку</Button>
+      <CropModal2 opened={opened} onClose={() => setOpened(false)} />
     </Box>
   );
 };

src/ui_kit/Modal/utils/canvasPreview.ts

@@ -0,0 +1,50 @@
+import { PixelCrop } from "react-image-crop";
+
+const TO_RADIANS = Math.PI / 180;
+
+export async function canvasPreview(image: HTMLImageElement, canvas: HTMLCanvasElement, crop: PixelCrop, rotate = 0) {
+  const scale = 1;
+  const ctx = canvas.getContext("2d");
+
+  if (!ctx) {
+    throw new Error("No 2d context");
+  }
+
+  const scaleX = image.naturalWidth / image.width;
+  const scaleY = image.naturalHeight / image.height;
+  // devicePixelRatio slightly increases sharpness on retina devices
+  // at the expense of slightly slower render times and needing to
+  // size the image back down if you want to download/upload and be
+  // true to the images natural size.
+  const pixelRatio = window.devicePixelRatio;
+  // const pixelRatio = 1
+
+  canvas.width = Math.floor(crop.width * scaleX * pixelRatio);
+  canvas.height = Math.floor(crop.height * scaleY * pixelRatio);
+
+  ctx.scale(pixelRatio, pixelRatio);
+  ctx.imageSmoothingQuality = "high";
+
+  const cropX = crop.x * scaleX;
+  const cropY = crop.y * scaleY;
+
+  const rotateRads = rotate * TO_RADIANS;
+  const centerX = image.naturalWidth / 2;
+  const centerY = image.naturalHeight / 2;
+
+  ctx.save();
+
+  // 5) Move the crop origin to the canvas origin (0,0)
+  ctx.translate(-cropX, -cropY);
+  // 4) Move the origin to the center of the original position
+  ctx.translate(centerX, centerY);
+  // 3) Rotate around the origin
+  ctx.rotate(rotateRads);
+  // 2) Scale the image
+  ctx.scale(scale, scale);
+  // 1) Move the center of the image to the origin (0,0)
+  ctx.translate(-centerX, -centerY);
+  ctx.drawImage(image, 0, 0, image.naturalWidth, image.naturalHeight, 0, 0, image.naturalWidth, image.naturalHeight);
+
+  ctx.restore();
+}

src/ui_kit/Modal/utils/useDebounceEffect.ts

@@ -0,0 +1,13 @@
+import { useEffect, DependencyList } from "react";
+
+export function useDebounceEffect(fn: () => void, waitTime: number, deps?: DependencyList) {
+  useEffect(() => {
+    const time = setTimeout(() => {
+      fn();
+    }, waitTime);
+
+    return () => {
+      clearTimeout(time);
+    };
+  }, [deps, fn, waitTime]);
+}