svelte-deep-zoom/README.md

 

# svelte-deep-zoom

![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)

Svelte component to render interactive Deep Zoom images (tiled image pyramids). Similar to [Open SeaDragon](https://openseadragon.github.io/) (fewer features, but smaller size). Supports [foveation](https://en.wikipedia.org/wiki/Foveated_imaging) to prioritize tiles closest to focus point when zooming.

[See Demo](https://captaincodeman.github.io/svelte-deep-zoom/)

## 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

```svelte
<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>
```