Croppie js switch between portait and landscape mode #793
Description
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