Trying to implement multiple crop

[gaganbiswas]

I am trying to implement a multiple crop. Similar to how Instagram handles the new post dialog. The crop seems to work for multiple images but, the problem i am having is except the first image the other images are getting scaled in or zoomed when when cropped.

Take a look at the code below. Everything works except for the fact that images after the first one is getting zoomed in so the cropped area is wrong.

P.S. I am currently working on the handle video part also. I would appreciate a help in that also if I am doing something wrong.

"use client";

import React, {
  useRef,
  useState,
  useEffect,
  forwardRef,
  useImperativeHandle,
} from "react";

import Image from "next/image";

import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { Button } from "../ui/button";
import {
  Images,
  RectangleHorizontal,
  RectangleVerticalIcon,
  Scaling,
  Square,
} from "lucide-react";
import { getCroppedImg } from "@/lib/helpers";
import Cropper from "react-easy-crop";

const MediaImageCropper = forwardRef(({ media }: { media: File[] }, ref) => {
  const [crop, setCrop] = useState({ x: 0, y: 0 });
  const [zoom, setZoom] = useState(1);
  const [stensilRatio, setStencilRatio] = useState(1);
  const [croppedAreaPixels, setCroppedAreaPixels] = useState(null);
  const [currentImageIndex, setCurrentImageIndex] = useState(0);

  useImperativeHandle(ref, () => ({
    handleSaveAll: async () => {
      const croppedImages = await Promise.all(
        media.map((file) => processImage(file))
      );
      return croppedImages;
    },
  }));

  const onCropComplete = (_: any, croppedAreaPixels: any) => {
    setCroppedAreaPixels(croppedAreaPixels);
  };

  const processImage = async (
    file: File
  ): Promise<{ data: Blob; src: string }> => {
    const imageSrc = URL.createObjectURL(file);
    const croppedImage = await getCroppedImg(imageSrc, croppedAreaPixels, zoom);

    return { data: croppedImage, src: URL.createObjectURL(croppedImage) };
  };

  return (
    <div className="flex flex-col">
      <div className="relative w-full aspect-square">
        <Cropper
          image={
            media[currentImageIndex].type.startsWith("image")
              ? URL.createObjectURL(media[currentImageIndex])
              : ""
          }
          video={
            media[currentImageIndex].type.startsWith("video")
              ? URL.createObjectURL(media[currentImageIndex])
              : ""
          }
          crop={crop}
          zoom={zoom}
          aspect={stensilRatio}
          onCropChange={setCrop}
          onZoomChange={setZoom}
          onCropComplete={onCropComplete}
        />
      </div>

      <div className="w-full flex items-center justify-between p-4">
        <DropdownMenu>
          <DropdownMenuTrigger asChild>
            <Button size={"icon"} variant={"secondary"}>
              <Scaling className="h-5 w-5" />
            </Button>
          </DropdownMenuTrigger>
          <DropdownMenuContent align="start" side="top">
            <DropdownMenuLabel>Resize</DropdownMenuLabel>
            <DropdownMenuSeparator />
            <DropdownMenuItem
              className="tracking-widest text-muted-foreground font-semibold"
              onClick={() => setStencilRatio(1)}
            >
              1:1 <Square className="w-5 h-5 ml-2" />
            </DropdownMenuItem>
            <DropdownMenuItem
              className="tracking-widest text-muted-foreground font-semibold"
              onClick={() => setStencilRatio(4 / 5)}
            >
              4:5 <RectangleVerticalIcon className="w-5 h-5 ml-2" />
            </DropdownMenuItem>
            <DropdownMenuItem
              className="tracking-widest text-muted-foreground font-semibold"
              onClick={() => setStencilRatio(16 / 9)}
            >
              16:9 <RectangleHorizontal className="w-5 h-5 ml-2" />
            </DropdownMenuItem>
          </DropdownMenuContent>
        </DropdownMenu>

        <DropdownMenu>
          <DropdownMenuTrigger asChild>
            <Button size={"icon"} variant={"secondary"}>
              <Images className="h-5 w-5" />
            </Button>
          </DropdownMenuTrigger>
          <DropdownMenuContent
            align="end"
            side="top"
            className="flex items-center gap-4 p-2"
          >
            {media.map((file, index) => (
              <DropdownMenuItem
                key={index}
                className={`cursor-pointer ring-2 rounded-md p-0 ${
                  index === currentImageIndex ? "ring-blue-500" : "ring-muted"
                }`}
                onClick={() => setCurrentImageIndex(index)}
              >
                {file.type.startsWith("image") ? (
                  <Image
                    src={URL.createObjectURL(file)}
                    alt={`Thumbnail ${index}`}
                    width={32}
                    height={32}
                    className="w-16 h-16 object-cover rounded-md"
                  />
                ) : (
                  <video
                    src={URL.createObjectURL(file)}
                    width="32"
                    height="32"
                    className="w-16 h-16 object-cover rounded-md"
                    muted
                  ></video>
                )}
              </DropdownMenuItem>
            ))}
          </DropdownMenuContent>
        </DropdownMenu>
      </div>
    </div>
  );
});

export default MediaImageCropper;

Example:

First picture is properly cropped to 16:9 aspect ratio. But the second and third isn't.

This is the 2nd picture when uploaded individually and cropped to 16:9 aspect ratio.

[ValentinH]

The best is to reset the internal cropper state between each image. To do so, the easiest way is to use the key property on the Cropper and pass a unique value to it whenever the image changes. The image url could probably be a good value.

[gaganbiswas]

Hey just an update, instead of creating a single cropper i created multiple ones and shared the stencilRatio across them and it worked. :D Thanks! Also, it would be great if we can have a ref property on cropper through which we can programmatically assign an image to the cropper inside a function. react-advanced-cropper has a similar thing.

[ValentinH]

What would you be able to do with the function to assign the image that you are not able to do with the image property?

[gaganbiswas]

Something like this maybe. I know we won't get so many situations where this might be useful but if we can use the current image property in the ref like the setImage then its all good :D. I am just starting with react-easy-crop...

const cropperRef = useRef(null);

const handleImageCropping = () => {
    const cropper = cropperRef.current;
    if(cropper) {
      cropper.setImage(URL.createObjectURL(file));
      const croppedImage = processImage(cropper.image, croppedDimensions);

      // Do something with the cropped image
    }
}

return <Cropper ref={cropperRef} {...props}/>

P.S. My video is not loading when i am using video={URL.createObjectURL(videoFile)}

[ValentinH]

This API doesn't look really Reactish to me. In React philosophy, the parent is responsible to pass the image prop and then provides callbacks to listen to changes.

Regarding the video, is it loading if you use a plain video tag?

[gaganbiswas]

Yes, it was working with a plain video tag. I fixed the video rendering by reading it using readFile fn and storing the dataUrl instead of creating the URL on fly using URL.createObjectURL(videoFile).

So thank you very much for all the information and this great package :D.