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
For people finding this thread: the following TypeScript code works for me to dynamically resize the cropper using directly the .croppr-image and .croppr-imageClipped elements.
letlastKnownValue: Croppr.CropValue;this.uploadedImageCropper=newCroppr(el,{// options// ...// store ratio value on update, needed for resize handlingreturnMode: "ratio",onCropEnd(data: Croppr.CropValue){lastKnownValue={ ...data};},onInitialize(instance: Croppr){// set the maximum height to (100vh - 15rem) to avoid scrollingletbounds=instance["imageEl"].getBoundingClientRect();instance["imageEl"].style.width=instance["imageClippedEl"].style.width="calc((100vh - 15rem) * "+(Math.floor((bounds.width*1000)/bounds.height)/1000).toString()+")";// handle resizing correctlylastKnownValue=instance.getValue();instance["resizeObserver"]=newResizeObserver(()=>{constbounds=instance["imageEl"].getBoundingClientRect();instance["box"].move(lastKnownValue.x*bounds.width,lastKnownValue.y*bounds.height);instance.resizeTo(lastKnownValue.width*bounds.width,lastKnownValue.height*bounds.height,[0,0]);});instance["resizeObserver"].observe(instance["imageEl"]);},});
Maybe that should be integrated directly into the library?
When I insert the picture and I resize my window the cropper takes another width and height****
The text was updated successfully, but these errors were encountered: