Svelte-deep-zoom NPM

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.

See Demo

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 tile
overlays an optional array of overlays to render over the tiles
concurrency concurrency limit for loading tiles (default 12). Set to 0 to disable
minTileZoom 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 constructor
Busy renders an animated busy spinner when tiles are loading
Debug 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>