Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/vgilabert94/streamlit-image-zoom
A Python interactive image zoom component for streamlit.
https://github.com/vgilabert94/streamlit-image-zoom
streamlit-component
Last synced: about 2 months ago
JSON representation
A Python interactive image zoom component for streamlit.
- Host: GitHub
- URL: https://github.com/vgilabert94/streamlit-image-zoom
- Owner: vgilabert94
- License: mit
- Created: 2024-02-28T14:42:17.000Z (10 months ago)
- Default Branch: main
- Last Pushed: 2024-07-02T09:14:33.000Z (6 months ago)
- Last Synced: 2024-10-23T21:55:59.962Z (2 months ago)
- Topics: streamlit-component
- Language: Python
- Homepage: https://image-zoom.streamlit.app/
- Size: 113 KB
- Stars: 10
- Watchers: 1
- Forks: 5
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Image Zoom - Streamlit Component
This repository presents a Python Streamlit component that wraps HTML, CSS, and JS code, enabling the creation of an interactive image zoom application.
[Try online demo!](https://image-zoom.streamlit.app/)
## Installation
- Install via pip:
```bash
pip install streamlit
pip install streamlit-image-zoom
```
- Install via git clone:
```bash
git clone https://github.com/vgilabert94/streamlit-image-zoom
```
## Documentation
### Main function
```python
def image_zoom(image: Union[Image.Image, np.ndarray],
mode: Optional[str] = "default",
size: Optional[Union[int, Tuple[int, int]]] = 512,
keep_aspect_ratio: Optional[bool] = True,
keep_resolution: Optional[bool] = False,
zoom_factor: Optional[Union[float, int]] = 2.0,
increment: Optional[float] = 0.2,
) -> HTML:
return component
```
### Parameters
- `image`: The image to be displayed. It can be either a PIL Image or a NumPy array.
- `mode`: The mode of interaction for zooming. Valid options are "default" (zoom on mousemove), "mousemove" (zoom on mousemove), "scroll" (zoom on scroll), "both" (zoom on both mousemove and scroll) or "dragmove" (Single-click to zoom in, click and drag to move the zoomed image). Default is "default".
- `size`: The desired size of the displayed image. If an integer is provided, the image will be resized to have that size (width = height). If a tuple of integers (width, height) is provided, the image will be resized to fit within the specified dimensions while maintaining its aspect ratio. Default is 512.
- `keep_aspect_ratio`: Whether to maintain the aspect ratio of the image during resizing. If True, the image will be resized while preserving its aspect ratio. If False, the image will be resized to exactly match the provided size without preserving aspect ratio. Default is True.
- `keep_resolution`: Whether to keep the original resolution for zooming. If True, use the original resolution for zooming. If False, use the resized image for zooming. Default is False.
Note: Setting this parameter to True may result in slower performance, especially for images with large sizes.
- `zoom_factor`: The zoom factor applied to the image when zooming in. Default is 2.0.
- `increment`: The increment value for adjusting the zoom level when scrolling. Should be between 0 and 1. Default is 0.2.
## Modes
Here's a list explaining the operation of each mode in the app:
### mousemove or default
As you move the mouse, the zoom level adjusts accordingly, providing a dynamic zoom experience.
### scroll
Zooming is activated exclusively by scrolling (wheel).
### both
This mode combines the functionalities of both "mousemove" and "scroll" modes, allowing users to navigate the image with a fixed zoom level.
Zooming is activated by scrolling (using the mouse wheel) and moving the mouse cursor, offering flexibility in how users interact with the zoom feature.
### dragmove
Drag and move mode Single-click to zoom in, click and drag to move the zoomed image, and double-click to zoom out.
## Examples
```python
import streamlit as st
from streamlit_image_zoom import image_zoom
from PIL import Image
import cv2
# Supported Image Formats
# PIL image
from PIL import Image
image = Image.open("images/building.jpg")
# Numpy array (opencv, scikit-image, etc)
import cv2
image = cv2.cvtColor(cv2.imread("image.jpg"), cv2.COLOR_BGR2RGB)
# Display image with default settings
image_zoom(image)
# Display image with custom settings
image_zoom(image, mode="scroll", size=(800, 600), keep_aspect_ratio=False, zoom_factor=4.0, increment=0.2)
```
## License
Distributed under the MIT License. See LICENSE.txt for more information.
## Contact
[Vicent Gilabert](mailto:[email protected])
[Linkedin](https://www.linkedin.com/in/vgilabert/)
## References
- https://github.com/fcakyon/streamlit-image-comparison
- https://codepen.io/parvezlm/pen/qBNrrwg
- https://jsfiddle.net/xta2ccdt/13/
- https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_image_zoom