{"id":15430492,"url":"https://github.com/lenisha/zoom-images","last_synced_at":"2025-08-23T15:38:08.886Z","repository":{"id":116071001,"uuid":"367463093","full_name":"lenisha/zoom-images","owner":"lenisha","description":"POC with OpenSeaDragon viewer","archived":false,"fork":false,"pushed_at":"2021-06-02T19:15:38.000Z","size":1823,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-05-19T06:38:17.230Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/lenisha.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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":"2021-05-14T19:38:01.000Z","updated_at":"2021-06-02T19:15:40.000Z","dependencies_parsed_at":null,"dependency_job_id":"7f5580c6-51e5-4ca7-a985-b12a78f5dd78","html_url":"https://github.com/lenisha/zoom-images","commit_stats":{"total_commits":5,"total_committers":1,"mean_commits":5.0,"dds":0.0,"last_synced_commit":"3a538ce300389b3065cb885007fbf123753958b4"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/lenisha/zoom-images","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lenisha%2Fzoom-images","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lenisha%2Fzoom-images/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lenisha%2Fzoom-images/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lenisha%2Fzoom-images/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/lenisha","download_url":"https://codeload.github.com/lenisha/zoom-images/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lenisha%2Fzoom-images/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":271754934,"owners_count":24815322,"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","status":"online","status_checked_at":"2025-08-23T02:00:09.327Z","response_time":69,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":[],"created_at":"2024-10-01T18:16:42.017Z","updated_at":"2025-08-23T15:38:08.867Z","avatar_url":"https://github.com/lenisha.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# POC for the Image Zooming\r\n\r\n## Prerequisites\r\n\r\n- Winsows WSL (or Linux VM) - https://docs.microsoft.com/en-us/windows/wsl/install-win10\r\n- Windows Terminal -  https://www.microsoft.com/en-us/p/windows-terminal/9n0dx20hk701\r\n- Azure Storage Explorer - https://azure.microsoft.com/en-ca/features/storage-explorer/ \r\n\r\n## DEEP Zoom setup\r\n\r\n- Create storage account and enable static web site\r\n![docs](/docs/staticws.jpg)\r\n\r\n### Split TIFF to DeepZoom Format\r\n\r\n- Install vips tool in Linux or WSL\r\n```\r\nsudo apt install libvips\r\nsudo apt install libvips-tools\r\n```\r\n\r\n- Run `vips dzsave` to prepare image \r\n\r\n```\r\nvips dzsave HR11-1075-S11-31517-1D.tiff slides\r\n```\r\n\r\nIt will generate `*.dzi` and multiple layers tile images\r\n\r\n- Load all resulting tiles into storage account in `$web` container\r\n\r\n![docs](/docs/dzi-storage.jpg)\r\n\r\n### Prepare Web Page with OpenSeadragon\r\n\r\nFollow [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:\r\n\r\n```\r\n \u003cdiv class=\"demoarea\"\u003e\r\n        \u003cdiv class=\"demoheading\"\u003e\r\n            OpenSeadragon Viewer With Default Settings\r\n            \u003cspan id='consolelog'\u003e\u003c/span\u003e\r\n        \u003c/div\u003e\r\n        \u003cdiv id=\"contentDiv\" class=\"openseadragon\"\u003e\u003c/div\u003e\r\n     \u003c/div\u003e\r\n    \r\n    \u003cscript type=\"text/javascript\"\u003e\r\n        // Example\r\n        OpenSeadragon({\r\n            id:              \"contentDiv\",\r\n            prefixUrl:       \"/openseadragon-2.4.2/images/\",\r\n            tileSources:     \"/slides.dzi\",\r\n            visibilityRatio: 1.0,\r\n            constrainDuringPan: true\r\n        });\r\n    \u003c/script\u003e\r\n```\r\n\r\n- Navigate to primary endpoint for static website\r\n\r\n\r\n## IIIF setup\r\n- Replace url in `docker/cantaloupe.properties` file to point to **Azure Storage Static Web Site Primary endpoint** (shown above) where TIFF file stored\r\n\r\n```\r\nHttpSource.BasicLookupStrategy.url_prefix = https://url\u003e.web.core.windows.net/tiff/\r\n```\r\n\r\n\r\n-  create Azure Container Registry and enable admin user \r\n![docs](/docs/acr.jpg)\r\n\r\n\r\n- Build docker image for [Cantaloupe IIIF server](https://cantaloupe-project.github.io/)\r\n\r\n```\r\ncd docker\r\naz acr build --registry \u003cname of ACR\u003e --image cantaloupe:5.0.2 .\r\n```\r\n\r\n- Create Azure Web App and deploy Cantaloupe Container\r\n![docs](/docs/webappcreate.jpg)\r\n\r\n![docs](/docs/webapp.jpg)\r\n\r\n\r\n- Set webapp configuration `WEBSITES_PORT` to port exposed by docker image\r\n![docs](/docs/webappport.jpg)\r\n\r\n- Start Web app and havigate to its URL\r\n![docs](/docs/webappurl.jpg)\r\n\r\n- To validate IIIF server navigate to image URL\r\n```\r\nhttps://\u003curl\u003e.azurewebsites.net/iiif/3/HR11-1075-S11-31517-1D.tiff/info.json\r\n```\r\n\r\n- Create `indexiiif.html` and upload it to the Storage Account, where `tileSources` should point to IIIF Server url hosting the image:\r\n\r\n```\r\n\u003cdiv class=\"demoarea\"\u003e\r\n        \u003cdiv class=\"demoheading\"\u003e\r\n            OpenSeadragon Viewer With Default Settings\r\n            \u003cspan id='consolelog'\u003e\u003c/span\u003e\r\n        \u003c/div\u003e\r\n        \u003cdiv id=\"contentDiv\" class=\"openseadragon\"\u003e\u003c/div\u003e\r\n     \u003c/div\u003e\r\n    \r\n    \u003cscript type=\"text/javascript\"\u003e\r\n        // Example\r\n        OpenSeadragon({\r\n            id:              \"contentDiv\",\r\n            prefixUrl:       \"/openseadragon-2.4.2/images/\",\r\n            visibilityRatio: 1.0,\r\n            constrainDuringPan: true,\r\n            sequenceMode:       true,\r\n            tileSources: [\"https://\u003curl\u003e.azurewebsites.net/iiif/3/HR11-1075-S11-31517-1D.tiff/info.json\"],\r\n            \"tiles\": [{\r\n                \"scaleFactors\": [ 1, 2, 4, 8, 16, 32, 64 ],\r\n                \"width\": 1024\r\n                }]\r\n        });\r\n    \u003c/script\u003e\r\n```\r\n\r\n \r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flenisha%2Fzoom-images","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flenisha%2Fzoom-images","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flenisha%2Fzoom-images/lists"}