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/