@akinon/next 1.92.0-rc.9 → 1.92.0-snapshot-ZERO-3449-20250618101111

package/hooks/use-image-cropper.ts

@@ -0,0 +1,160 @@
+import { useState, useRef } from 'react';
+import 'react-image-crop/dist/ReactCrop.css';
+
+type CropType = {
+  unit: 'px' | '%';
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+};
+
+export function useImageCropper(
+  setIsLoading: (loading: boolean) => void,
+  processImage: (base64: string) => void
+) {
+  const [isCropping, setIsCropping] = useState(false);
+  const [crop, setCrop] = useState<CropType>({
+    unit: 'px',
+    x: 0,
+    y: 0,
+    width: 100,
+    height: 100
+  });
+  const [completedCrop, setCompletedCrop] = useState<CropType | null>(null);
+
+  const imageRef = useRef<HTMLImageElement>(null);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  const handleCropComplete = (c) => {
+    setCompletedCrop(c);
+  };
+
+  const toggleCropMode = () => {
+    const newCroppingState = !isCropping;
+    setIsCropping(newCroppingState);
+
+    if (newCroppingState) {
+      if (completedCrop?.width && completedCrop?.height) {
+        setCrop(completedCrop);
+      } else {
+        const centeredCrop: CropType = {
+          unit: '%',
+          x: 25,
+          y: 25,
+          width: 50,
+          height: 50
+        };
+        setCrop(centeredCrop);
+      }
+    }
+  };
+
+  const processCompletedCrop = (crop) => {
+    if (!imageRef.current || !crop?.width || !crop?.height) {
+      setIsLoading(false);
+      return;
+    }
+
+    try {
+      const canvas = document.createElement('canvas');
+      const image = imageRef.current;
+
+      const scaleX = image.naturalWidth / image.width;
+      const scaleY = image.naturalHeight / image.height;
+
+      canvas.width = crop.width * scaleX;
+      canvas.height = crop.height * scaleY;
+
+      const ctx = canvas.getContext('2d');
+
+      if (!ctx) {
+        setIsLoading(false);
+        throw new Error('No 2d context');
+      }
+
+      try {
+        ctx.drawImage(
+          image,
+          crop.x * scaleX,
+          crop.y * scaleY,
+          crop.width * scaleX,
+          crop.height * scaleY,
+          0,
+          0,
+          crop.width * scaleX,
+          crop.height * scaleY
+        );
+
+        const base64Image = canvas.toDataURL('image/jpeg');
+        processImage(base64Image);
+      } catch (canvasError) {
+        const corsFixedImg = new window.Image();
+        corsFixedImg.crossOrigin = 'anonymous';
+
+        corsFixedImg.onload = () => {
+          try {
+            canvas.width = crop.width * scaleX;
+            canvas.height = crop.height * scaleY;
+
+            ctx.drawImage(
+              corsFixedImg,
+              crop.x * scaleX,
+              crop.y * scaleY,
+              crop.width * scaleX,
+              crop.height * scaleY,
+              0,
+              0,
+              crop.width * scaleX,
+              crop.height * scaleY
+            );
+
+            const base64Image = canvas.toDataURL('image/jpeg');
+            processImage(base64Image);
+          } catch (retryError) {
+            setIsLoading(false);
+          }
+        };
+
+        corsFixedImg.onerror = () => {
+          setIsLoading(false);
+        };
+
+        const cacheBuster = Date.now();
+        const imageUrl = image.src.includes('?')
+          ? `${image.src}&cors_fix=${cacheBuster}`
+          : `${image.src}?cors_fix=${cacheBuster}`;
+
+        corsFixedImg.src = imageUrl;
+      }
+    } catch (error) {
+      setIsLoading(false);
+    }
+  };
+
+  const resetCrop = () => {
+    setIsCropping(false);
+    setCompletedCrop(null);
+    setCrop({
+      unit: 'px',
+      x: 0,
+      y: 0,
+      width: 100,
+      height: 100
+    });
+  };
+
+  return {
+    isCropping,
+    crop,
+    setCrop,
+    completedCrop,
+    setCompletedCrop,
+    imageRef,
+    fileInputRef,
+    handleCropComplete,
+    toggleCropMode,
+    processCompletedCrop,
+    resetCrop
+  };
+}