Repository navigation
While trying to rotate the image, the image itself is not fitting inside the container, full image is not visible after rotating to 90 or 270 degree #598
Description
` <ReactCrop
crop={crop}
percentageCrop) => setCrop(percentageCrop)}
=>
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"
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
Activity
Rishab-Mishra commentedon Sep 12, 2024
did you solved it ?
rajputkamal commentedon Sep 12, 2024
Yes, thanks
pedrodias2703 commentedon Sep 12, 2024
@rajputkamal how?
hiimkosu1 commentedon Sep 17, 2024
How did you fix it?
rajputkamal commentedon Sep 25, 2024
I fixed by making internal API calls to return the updated image url with rotation.
digitalkrafter commentedon Apr 12, 2025
@rajputkamal i am also getting same issue while image in vertical position not able to crop the image
could you please provide the solution what you have