Currently, I am working on a react application and facing an issue while trying to display images with custom zoom-in/zoom-out functionality. Due to the need to add markers to each image that require precise positioning, using a pre-existing library for zooming is not providing accurate coordinates.
To overcome this challenge, I have implemented the following functions for Zoom-In and Zoom-Out :
zoomOut = () => {
var myImg = document.getElementById("action-image")
var currWidth = (myImg.style.maxWidth.split("v"))[0];
var currHeight = (myImg.style.maxHeight.split("v"))[0];
myImg.style.maxWidth = (Number(currWidth) - 50) + "vw";
myImg.style.maxHeight = (Number(currHeight) - 50) + "vh";
if (this.state.scale == 0)
this.resetImage()
else if (this.state.scale != 0) {
this.setState((state) => ({
...state,
scale: this.state.scale - 1
}))
}
}
zoomIn = () => {
console.log(this.state.scale);
if (this.state.scale < 11) {
var myImg = document.getElementById("action-image")
var currWidth = (myImg.style.maxWidth.split("v"))[0];
var currHeight = (myImg.style.maxHeight.split("v"))[0];
myImg.style.maxWidth = (Number(currWidth) + 50) + "vw";
myImg.style.maxHeight = (Number(currHeight) + 50) + "vh";
this.setState((state) => ({
...state,
scale: this.state.scale + 1
}))
}
}
resetImage = () => {
var myImg = document.getElementById("action-image")
myImg.style.maxHeight = '95vh'
myImg.style.maxWidth = '75.4vw'
this.setState((state) => ({
...state,
scale: 0,
}))
}
Below is the code snippet for image rendering:
<RegionSelect
maxRegions={1}
regions={this.state.imageLoad ? [] : this.state.regions}
regionStyle={regionStyle}
constraint={false}
onChange={this.onChange}
Draggable={false}
regionRenderer={this.regionRenderer}
>
<img id="action-image" style={{ zIndex: 1, maxHeight: '95vh', maxWidth: '75.4vw' }}
src={this.state.imageURL} onLoad={((load) => {
this.setState((state) => ({
...state,
imageLoad: false,
height: 'unset',
width: 'unset'
}))
})} />
</RegionSelect>
The main issue arises when the image is centered to maintain its aspect ratio. As the image is zoomed in, the scrollbar should also be repositioned to the center to allow scrolling in all directions. However, currently, the scrollbar starts at the top-left position, causing parts of the image (from the top and left side) to be hidden.