You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
I have created the following ImageCropper component for my project:
'use client';import{Button,Modal,ModalContent,ModalHeader,ModalBody,ModalFooter,useDisclosure,}from'@nextui-org/react';import{useDropzone}from'react-dropzone';importReact,{useEffect,useState}from'react';import{Cropper,ImageRestriction}from'react-advanced-cropper';import'react-advanced-cropper/dist/style.css';import{ImagePlus}from'lucide-react';constImageCropper=({
croppedImage,
setCroppedImage,
label,
className,
imageType,
aspect,})=>{const[cropper,setCropper]=useState(null);const[isCropping,setIsCropping]=useState(false);const[image,setImage]=useState(null);const[croppedImageURL,setCroppedImageURL]=useState(null);const{ isOpen, onOpen, onClose }=useDisclosure();const{ getRootProps, getInputProps, open }=useDropzone({accept: {'image/png': ['.png'],'image/jpeg': ['.jpg','.jpeg'],},noKeyboard: true,noClick: true,onDrop: acceptedFiles=>{setIsCropping(true);// Set isCropping to true when a new image is dropped// setCroppedImage(acceptedFiles[0]);onOpen();},});constonChange=cropper=>{setCropper(cropper);};consthandleDropzoneClick=e=>{// If the modal is open, do nothingif(isOpen){e.stopPropagation();// Prevent click from reaching dropzone}else{open();}};consthandleFileChange=e=>{constfile=e.target.files[0];if(file){setIsCropping(true);// Set isCropping to true when a new image is selectedconstreader=newFileReader();reader.onload=()=>{setImage(reader.result);onOpen();};reader.readAsDataURL(file);}};constapplyCrop=()=>{if(cropper){constcanvas=cropper.getCanvas();if(canvas){canvas.toBlob(blob=>{setCroppedImage(blob);});setCropper(null);setIsCropping(false);onClose();}}};constcancelCrop=e=>{setCroppedImage(null);setImage(null);setCropper(null);setIsCropping(false);// Reset isCropping when cropping is cancelledonClose();};useEffect(()=>{if(croppedImageinstanceofBlob){setCroppedImageURL(URL.createObjectURL(croppedImage));}elseif(croppedImage?.url){setCroppedImageURL(croppedImage?.url);}elseif(croppedImage===null)setCroppedImageURL(null);},[croppedImage]);return(<div{...getRootProps({className: 'dropzone'})}onClick={handleDropzoneClick}className={`${className}flex justify-center items-center flex-col text-center `}><div><input{...getInputProps()}id={imageType}onChange={handleFileChange}/></div><div><ModalisOpen={isOpen}onClose={cancelCrop}size="3xl"isDismissable={false}><ModalContent><ModalHeaderclassName="flex flex-col gap-1">{label}</ModalHeader><ModalBody>{image&&isCropping&&(<div><Croppersrc={image}onChange={onChange}className={'cropper'}aspectRatio={aspect}initialCrop={{x: 0,y: 0,width: 100,height: 100}}stencilProps={{handlers: true,lines: true,movable: true,resizable: true,}}canvas={true}stencilSize={{width: 300,height: 300}}imageRestriction={ImageRestriction.fillArea}/><divclassName="flex gap-5 justify-center pt-4"><Buttoncolor="primary"onClick={applyCrop}>
Apply Crop
</Button><Buttoncolor="danger"onClick={cancelCrop}>
Cancel Crop
</Button></div></div>)}</ModalBody></ModalContent></Modal></div>{croppedImageURL ? (<imgsrc={croppedImageURL}alt="Cropped Image"className=" object-cover"/>) : (<div>{label ? (<pclassName=" flex flex-col justify-center items-center w-full text-primary text-[8px]"><ImagePlus/>{label}</p>) : (<ImagePlusclassName="text-primary"size={32}/>)}</div>)}</div>);};exportdefaultImageCropper;
In the above code, whenever ImageCropper is clicked on, the cropper opens in a nextui-org/react Modal. The above code works perfectly in Firefox, but doesn't seem to work in Chrome/Safari. In chrome/safari, the modal opens but the cropper is not shown. Plus there is no error/warning in the browser console when this happens as well.
Below are screen recording of how it looks on both browsers.
Firefox:
firefox.mp4
Chrome:
chrome.mp4
The text was updated successfully, but these errors were encountered:
I have created the following ImageCropper component for my project:
In the above code, whenever ImageCropper is clicked on, the cropper opens in a nextui-org/react Modal. The above code works perfectly in Firefox, but doesn't seem to work in Chrome/Safari. In chrome/safari, the modal opens but the cropper is not shown. Plus there is no error/warning in the browser console when this happens as well.
Below are screen recording of how it looks on both browsers.
Firefox:
firefox.mp4
Chrome:
chrome.mp4
The text was updated successfully, but these errors were encountered: