Open rajputkamal opened 1 month ago
` <ReactCrop crop={crop} onChange={(_, percentageCrop) => setCrop(percentageCrop)} onComplete={(c) => setCompletedCrop && setCompletedCrop(c) } aspect={builderLandscapeAspectRatio(builderAspectRatio)} // passing different aspect ratios keepSelection style={{ minHeight: "100%", height: "auto", }} > <StyledImage id="cropped-image" ref={imgRef} src={largeThumbnailMediaurl} alt="Crop me" onLoad={onImageLoad} style={{ transform: `scale(${scale}) rotate(${rotate}deg)`, }} /> </ReactCrop>`
I tried the below approach to swap the height and width during the rotation.
`const image = document.getElementById("cropped-image") as HTMLCanvasElement; const reactCropperContainer = document.querySelector( ".ReactCrop--fixed-aspect", ) as HTMLDivElement; const isRotated = [90, 270, -90, -270].includes(degree); if (isRotated) { reactCropperContainer.style.width = `${newHeight}px`; reactCropperContainer.style.height = `${newWidth}px`; image.style.transform = `scale(${scale}) rotate(${rotate}deg)`; } else { reactCropperContainer.style.width = `${newWidth}px`; reactCropperContainer.style.height = "100%"; image.style.transform = `scale(${scale}) rotate(${rotate}deg)`; }`
but this approach is also not working. My main problem is image is entirely not fitting inside the container during rotation
did you solved it ?
Yes, thanks
@rajputkamal how?
How did you fix it?
I tried the below approach to swap the height and width during the rotation.
but this approach is also not working. My main problem is image is entirely not fitting inside the container during rotation