Croppie js switch between portait and landscape mode

[inzaynjr]

Here's my code below when i switch between portrait and lndscape without changing current zoom and points and height width every thing will be same just viewport will change why it doesnt work? is there any issue in my code or library doesnt support this??

i will be very grate full if u help me out , thanks !!

this.controlLandscape.addEventListener('click', () => {
  this.changeViewport('landscape');
});
this.controlPortrait.addEventListener('click', () => {
  this.changeViewport('portrait');
});

initCroppie(viewportConfig) {
if (!viewportConfig) {
viewportConfig = { width: 200, height: 0.3 * document.body.clientHeight, type: 'square' };
}
if (this.mediaPopupImgContainer && !this.basic) {
this.basic = new Croppie(this.mediaPopupImgContainer, {
viewport: viewportConfig,
aspectRatio: 16 / 9,
showZoomer: true,
url: this.basicImg,
enableExif: true,
enableOrientation: true,
zoom: 0.8,
});

}
console.log(this.basic);

}
rotateCanvas() {
this.basic.rotate(90);
}
changeViewport(mode) {
if (this.basic) {
const currentZoomAndPoints = this.basic.get(['zoom', 'points']);
const { zoom, points } = currentZoomAndPoints;

  const viewportConfig = mode === 'portrait'
    ? { width: 200, height: 0.3 * document.body.clientHeight, type: 'square' }
    : { width: 300, height: 0.3 * document.body.clientHeight, type: 'square' };

  if (this.basicImg) {
    this.basic.bind({
      url: this.basicImg,
      viewport: viewportConfig,
      zoom: zoom,
      points: points
    }).then(() => {
    }).catch((error) => {
      console.error("Error binding image:", error);
    });
  } else {
    console.error("Image URL is missing or invalid.");
  }
} else {
  console.error("this.basic is not defined");
}

}

ASLO HOW CAN I CHANGE _currentZoom & zoom with js i want to get the current zoom and when the switch between portrait and ladscape happend curent zoom will not change and points will be same and all data will be same

options
:
boundary
:
{}
customClass
:
""
enableExif
:
false
enableKeyMovement
:
true
enableOrientation
:
false
enableResize
:
false
enableZoom
:
true
enforceBoundary
:
true
mouseWheelZoom
:
true
orientationControls
:
{enabled: true, leftClass: '', rightClass: ''}
resizeControls
:
{width: true, height: true}
showZoomer
:
true
update
:
ƒ ()
useCanvas
:
false
viewport
:
height
:
232.60000000000002
type
:
"square"
width
:
300
[[Prototype]]
:
Object
[[Prototype]]
:
Object
_currentZoom
:
0.5154639175257731
_originalImageHeight
:
1080
_originalImageWidth
:
1080

[inzaynjr]

I havent get any response from you guys ?

[theodorejb]

The issue is probably that Croppie doesn't support dynamically changing options on an existing instance.

It doesn't seem like Croppie is still being maintained, but I developed a simplified fork called Cropt which has a setOptions() method for dynamic changes. You can see on the demo site that viewport width and height can be dynamically changed by dragging the sliders: https://theodorejb.github.io/cropt/