{"id":15687220,"url":"https://github.com/vgilabert94/streamlit-image-zoom","last_synced_at":"2025-04-30T14:42:44.075Z","repository":{"id":224965073,"uuid":"764691732","full_name":"vgilabert94/streamlit-image-zoom","owner":"vgilabert94","description":"A Python interactive image zoom component for streamlit.","archived":false,"fork":false,"pushed_at":"2024-07-02T09:14:33.000Z","size":116,"stargazers_count":14,"open_issues_count":2,"forks_count":5,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-04-15T09:30:07.371Z","etag":null,"topics":["streamlit-component"],"latest_commit_sha":null,"homepage":"https://image-zoom.streamlit.app/","language":"Python","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/vgilabert94.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-02-28T14:42:17.000Z","updated_at":"2025-04-13T16:14:17.000Z","dependencies_parsed_at":null,"dependency_job_id":"68ba9e22-be70-4c87-a911-0b712c985640","html_url":"https://github.com/vgilabert94/streamlit-image-zoom","commit_stats":null,"previous_names":["vgilabert94/streamlit-image-zoom"],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vgilabert94%2Fstreamlit-image-zoom","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vgilabert94%2Fstreamlit-image-zoom/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vgilabert94%2Fstreamlit-image-zoom/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vgilabert94%2Fstreamlit-image-zoom/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/vgilabert94","download_url":"https://codeload.github.com/vgilabert94/streamlit-image-zoom/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251722927,"owners_count":21633044,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["streamlit-component"],"created_at":"2024-10-03T17:45:27.189Z","updated_at":"2025-04-30T14:42:44.026Z","avatar_url":"https://github.com/vgilabert94.png","language":"Python","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Image Zoom - Streamlit Component\n\nThis repository presents a Python Streamlit component that wraps HTML, CSS, and JS code, enabling the creation of an interactive image zoom application.\n[Try online demo!](https://image-zoom.streamlit.app/)\n\u003cp align=\"center\"\u003e\n    \u003cimg src=\"images/mousemove.gif\" width=\"512\"/\u003e\n\u003c/p\u003e\n\n\n## Installation\n- Install via pip:\n\n```bash\npip install streamlit\npip install streamlit-image-zoom\n```\n\n- Install via git clone:\n```bash\ngit clone https://github.com/vgilabert94/streamlit-image-zoom\n```\n\n## Documentation\n### Main function\n\n```python\ndef image_zoom(image: Union[Image.Image, np.ndarray],\n                mode: Optional[str] = \"default\",\n                size: Optional[Union[int, Tuple[int, int]]] = 512,\n                keep_aspect_ratio: Optional[bool] = True,\n                keep_resolution: Optional[bool] = False,\n                zoom_factor: Optional[Union[float, int]] = 2.0,\n                increment: Optional[float] = 0.2,\n            ) -\u003e HTML:\n\n    return component\n```\n\n### Parameters\n\n- `image`: The image to be displayed. It can be either a PIL Image or a NumPy array.\n- `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\".\n- `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.\n- `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.\n- `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.  \nNote: Setting this parameter to True may result in slower performance, especially for images with large sizes.\n- `zoom_factor`: The zoom factor applied to the image when zooming in. Default is 2.0.\n- `increment`: The increment value for adjusting the zoom level when scrolling. Should be between 0 and 1. Default is 0.2.\n\n\n## Modes\n\nHere's a list explaining the operation of each mode in the app:\n\n### mousemove or default\nAs you move the mouse, the zoom level adjusts accordingly, providing a dynamic zoom experience.\n\u003cp align=\"center\"\u003e\n    \u003cimg src=\"images/mousemove.gif\" width=\"512\"/\u003e\n\u003c/p\u003e\n\n### scroll\nZooming is activated exclusively by scrolling (wheel).  \n\u003cp align=\"center\"\u003e\n    \u003cimg src=\"images/scroll.gif\" width=\"512\"/\u003e\n\u003c/p\u003e\n\n### both\nThis mode combines the functionalities of both \"mousemove\" and \"scroll\" modes, allowing users to navigate the image with a fixed zoom level.\nZooming is activated by scrolling (using the mouse wheel) and moving the mouse cursor, offering flexibility in how users interact with the zoom feature.\n\u003cp align=\"center\"\u003e\n    \u003cimg src=\"images/both.gif\" width=\"512\"/\u003e\n\u003c/p\u003e\n\n### dragmove\nDrag and move mode Single-click to zoom in, click and drag to move the zoomed image, and double-click to zoom out.\n\n\n## Examples\n\n```python\nimport streamlit as st\nfrom streamlit_image_zoom import image_zoom\nfrom PIL import Image\nimport cv2\n\n# Supported Image Formats\n# PIL image\nfrom PIL import Image\nimage = Image.open(\"images/building.jpg\")\n\n# Numpy array (opencv, scikit-image, etc)\nimport cv2\nimage = cv2.cvtColor(cv2.imread(\"image.jpg\"), cv2.COLOR_BGR2RGB)\n\n# Display image with default settings\nimage_zoom(image)\n\n# Display image with custom settings\nimage_zoom(image, mode=\"scroll\", size=(800, 600), keep_aspect_ratio=False, zoom_factor=4.0, increment=0.2)\n```\n\n## License\nDistributed under the MIT License. See LICENSE.txt for more information.\n\n## Contact\n\n[Vicent Gilabert](mailto:gilabert_vicent@hotmail.com)\n\n[Linkedin](https://www.linkedin.com/in/vgilabert/)\n\n\n## References\n- https://github.com/fcakyon/streamlit-image-comparison\n- https://codepen.io/parvezlm/pen/qBNrrwg\n- https://jsfiddle.net/xta2ccdt/13/\n- https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_image_zoom\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvgilabert94%2Fstreamlit-image-zoom","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvgilabert94%2Fstreamlit-image-zoom","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvgilabert94%2Fstreamlit-image-zoom/lists"}