OpenSeadragon 5.0.1

example: image tile source

If you have a simple image that you would like to display in OpenSeadragon, you can do so by using the Image Tile Source.

Note that using the Image Tile Source for big images will have a performance impact. In that case, consider building a pyramid.

Inline Configuration

Inline Configuration just consists in setting the type of the tile source to 'image' and to provide the URL of the image.

Example Inline Configuration for an Image

OpenSeadragon({
    ...
    tileSources: {
        type: 'image',
        url:  '/example-images/grand-canyon-landscape-overlooking.jpg'
    }
    ...
});

By default, the Image Tile Source tries to build an internal pyramid to avoid aliasing when zoomed out. To disable this feature, you can set the 'buildPyramid' flag to false:

OpenSeadragon({
    ...
    tileSources: {
        type: 'image',
        url:  '/example-images/grand-canyon-landscape-overlooking.jpg',
        buildPyramid: false
    }
    ...
});

If the image is fetched from another domain, the pyramid can not be built without CORS support.
If the image server has CORS headers, you can set the cross origin policy and the withCredentials flag like this:

OpenSeadragon({
    ...
    tileSources: {
        type: 'image',
        url:  'http://cors-enabled-server.org/my-image.png',
        crossOriginPolicy: 'Anonymous',
        ajaxWithCredentials: false
    }
    ...
});