A plugin tilesource for OpenSeadragon that uses geotiff.js to provide serverless access to view compatible local or remote TIFF files
npm install geotiff-tilesourceImplementation of a TileSource for OpenSeadragon based on geotiff.js, enabling local and remote TIFF files to be viewed without using an image server.
See it in action at https://pearcetm.github.io/GeoTIFFTileSource/demo/demo.html
In order to generate a GeoTIFF file compatible with this library, you can for instance use sharp, a High performance Node.js image processing library.
``javascript
import sharp from 'sharp'
sharp('input.jpg', {limitInputPixels:false})
.tiff({tile:true, pyramid:true})
.toFile('output.tiff')
.then(console.log)
.catch(console.error);
`
Many options are available.
Check sharp documentation on TIFF output format.
or PHP built-in development web server) are not.Check Mozilla documentation on HTTP range requests.
Usage
$3
The plugin is available as both an npm package and a standalone script.
#### Using NPM
`bash
npm i geotiff-tilesource
`#### Using standalone scripts
Standalone scripts for the plugin are available as both UMD and ES module scripts. The UMD script is compatible with the
OpenSeadragon global object, while the ES module script can be imported as a module.
Note that the OpenSeadragon library must be loaded before the plugin script. The geotiff.js library comes bundled with the plugin, and does not need to be loaded separately.`html
`$3
The plugin allows for extending OpenSeadragon with a new
TileSource type, the GeoTIFFTileSource. To initialize, call the following at the top-most import of OpenSeadragon:#### Using NPM package
`javascript
import OpenSeadragon from 'openseadragon';
import { enableGeoTIFFTileSource } from "geotiff-tilesource";enableGeoTIFFTileSource(OpenSeadragon);
`#### Using standalone scripts
##### Using UMD script
The UMD script will automatically extend the
OpenSeadragon global object with the GeoTIFFTileSource class.##### Using ES module script
`javascript
import { enableGeoTIFFTileSource } from './geotiff-tilesource.mjs';enableGeoTIFFTileSource(OpenSeadragon);
`This will make the
OpenSeadragon.GeoTIFFTileSource class available for use.$3
#### Prepare TileSources
GeoTIFFTileSource accepts both local and remote GeoTIFF files. For local files, the
url parameter should be a File object. For remote files, the url parameter should be a string. The getAllTileSources reads a local or remote GeoTIFF file and returns an array of OpenSeadragon.GeoTIFFTileSource objects, one for each image (page) in the GeoTIFF file.`javascript
const tiffTileSources = await OpenSeadragon.GeoTIFFTileSource.getAllTileSources(remoteUrl, {
logLatency: false,
});
`#### Create OpenSeadragon Viewer
The
OpenSeadragon.Viewer can be created as usual, with the tileSources parameter set to the array of OpenSeadragon.GeoTIFFTileSource objects, or with the viewer.open method.`javascript
const viewer = new OpenSeadragon.Viewer({
id: 'viewer',
crossOriginPolicy: "Anonymous",
ajaxWithCredentials: true,
tileSources: tiffTileSources,
...viewerOptions,
});// OR
viewer.open(tiffTileSources);
``