import React, { useRef } from "react"; import Cropper, { ReactCropperElement } from "react-cropper"; import "cropperjs/dist/cropper.css"; import { Button, Modal } from "flowbite-react"; type Props = { src: string; setSrc: (src: string) => void; setTempSrc: (src: string) => void; isOpen: boolean; setIsOpen: (isOpen: boolean) => void; height: number; width: number; aspectRatio: number; guides: boolean; quality: number; forceAspect?: boolean; }; export const CropModal: React.FC = (props) => { const cropperRef = useRef(null); const getCropData = () => { if (typeof cropperRef.current?.cropper !== "undefined") { props.setSrc( cropperRef.current?.cropper .getCroppedCanvas({ width: props.width, height: props.height, maxWidth: props.width, maxHeight: props.height, }) .toDataURL("image/jpeg", props.quality) ); props.setTempSrc(""); } }; return ( props.setIsOpen(false)} size={"7xl"} > Обрезать изображение

Управление

Тяните за углы что-бы выбрать область

Нажмите 2 раза на пустое место, что бы поменять режим выбора области на перемещение и обратно

Используйте колёсико мыши что-бы изменить масштаб

); };