https://github.com/lenisha/zoom-images
POC with OpenSeaDragon viewer
https://github.com/lenisha/zoom-images
Last synced: 10 months ago
JSON representation
POC with OpenSeaDragon viewer
- Host: GitHub
- URL: https://github.com/lenisha/zoom-images
- Owner: lenisha
- Created: 2021-05-14T19:38:01.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2021-06-02T19:15:38.000Z (about 5 years ago)
- Last Synced: 2025-05-19T06:38:17.230Z (about 1 year ago)
- Language: JavaScript
- Size: 1.74 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# POC for the Image Zooming
## Prerequisites
- Winsows WSL (or Linux VM) - https://docs.microsoft.com/en-us/windows/wsl/install-win10
- Windows Terminal - https://www.microsoft.com/en-us/p/windows-terminal/9n0dx20hk701
- Azure Storage Explorer - https://azure.microsoft.com/en-ca/features/storage-explorer/
## DEEP Zoom setup
- Create storage account and enable static web site
### Split TIFF to DeepZoom Format
- Install vips tool in Linux or WSL
```
sudo apt install libvips
sudo apt install libvips-tools
```
- Run `vips dzsave` to prepare image
```
vips dzsave HR11-1075-S11-31517-1D.tiff slides
```
It will generate `*.dzi` and multiple layers tile images
- Load all resulting tiles into storage account in `$web` container
### Prepare Web Page with OpenSeadragon
Follow [OSD GetStarted](https://openseadragon.github.io/docs/) and create index.html pointing `tileSources` to slides in DZI format and `prefixUrl` to the images coming with openseadragon library:
```
OpenSeadragon Viewer With Default Settings
// Example
OpenSeadragon({
id: "contentDiv",
prefixUrl: "/openseadragon-2.4.2/images/",
tileSources: "/slides.dzi",
visibilityRatio: 1.0,
constrainDuringPan: true
});
```
- Navigate to primary endpoint for static website
## IIIF setup
- Replace url in `docker/cantaloupe.properties` file to point to **Azure Storage Static Web Site Primary endpoint** (shown above) where TIFF file stored
```
HttpSource.BasicLookupStrategy.url_prefix = https://url>.web.core.windows.net/tiff/
```
- create Azure Container Registry and enable admin user
- Build docker image for [Cantaloupe IIIF server](https://cantaloupe-project.github.io/)
```
cd docker
az acr build --registry --image cantaloupe:5.0.2 .
```
- Create Azure Web App and deploy Cantaloupe Container
- Set webapp configuration `WEBSITES_PORT` to port exposed by docker image
- Start Web app and havigate to its URL
- To validate IIIF server navigate to image URL
```
https://.azurewebsites.net/iiif/3/HR11-1075-S11-31517-1D.tiff/info.json
```
- Create `indexiiif.html` and upload it to the Storage Account, where `tileSources` should point to IIIF Server url hosting the image:
```
OpenSeadragon Viewer With Default Settings
// Example
OpenSeadragon({
id: "contentDiv",
prefixUrl: "/openseadragon-2.4.2/images/",
visibilityRatio: 1.0,
constrainDuringPan: true,
sequenceMode: true,
tileSources: ["https://<url>.azurewebsites.net/iiif/3/HR11-1075-S11-31517-1D.tiff/info.json"],
"tiles": [{
"scaleFactors": [ 1, 2, 4, 8, 16, 32, 64 ],
"width": 1024
}]
});
```