react-image-crop

react-image-crop copied to clipboard

              ` <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