svelte-deep-zoom
v0.0.12
Published
![minified](https://img.shields.io/bundlephobia/min/svelte-deep-zoom/0.0.11?style=for-the-badge) ![minified + zipped](https://img.shields.io/bundlephobia/minzip/svelte-deep-zoom/0.0.11?style=for-the-badge)
Downloads
27
Maintainers
Readme
svelte-deep-zoom
Svelte component to render interactive Deep Zoom images (tiled image pyramids). Similar to Open SeaDragon (fewer features, but smaller size). Supports foveation to prioritize tiles closest to focus point when zooming.
Instructions
Install using your package manager of choice:
pnpm i svelte-deep-zoom
Import action into page, create options and pass to action.
Options include:
width
&height
in CSS pixels of item to render (will be centered and sized to fit canvas)size
size of tiles (default 256)overlap
tile overlap (default 0)src
a function to generate the URL for a tile given the pyramid level, col, and row of the tileoverlays
an optional array of overlays to render over the tilesconcurrency
concurrency limit for loading tiles (default 12). Set to 0 to disableminTileZoom
the minimum zoom level that a tile layer will render (default 0.8)maxTileZoom
the maximum zoom level that a tile layer will render (default 2.0)opacityDuration
the duration that a newly loaded tile will take to fade in (creates a "progressive JPEG" loading effect)
Overlays
Overlasys allow additional functionality to be added which is tree-shaken out if unused. In built overlays include:
Watermark
pass the image src url in the constructorBusy
renders an animated busy spinner when tiles are loadingDebug
renders tile borders and level / col / row information
Additional overlays that could be developed might include a mini-map to show where in the full image you are zoomed into.
Example
<script lang="ts">
import { deepzoom } from 'svelte-deep-zoom'
const options = {
width: 13920,
height: 10200,
size: 254,
overlap: 1,
src(level: number, col: number, row: number) {
return `https://openseadragon.github.io/example-images/duomo/duomo_files/${level}/${col}_${row}.jpg`
}
}
</script>
<canvas use:deepzoom={options} />
<style>
canvas {
width: 100%;
height: 100%;
user-select: none;
touch-action: none;
overscroll-behavior: none;
}
</style>