From fa899d730264cb9424446f63f395755d4f48b7f0 Mon Sep 17 00:00:00 2001 From: Jonathan Rochkind Date: Tue, 8 Aug 2017 17:04:02 -0400 Subject: [PATCH] an imgix tile source https://www.imgix.com/ --- src/imgixtilesource.js | 299 +++++++++++++++++++++++++++++++++++++++++ 1 file changed, 299 insertions(+) create mode 100644 src/imgixtilesource.js diff --git a/src/imgixtilesource.js b/src/imgixtilesource.js new file mode 100644 index 00000000..70ff1f8c --- /dev/null +++ b/src/imgixtilesource.js @@ -0,0 +1,299 @@ +/* + * OpenSeadragon - ImgixTileSource + * + * Modification of IIIFTileSource to use imgix.com instead. + * I don't completely understand all this code, there may be some + * dead code still in here, work in progress. + * + * IN PROGRESS: + * * some code just copied from IIIF tile source, and I don't totally + * understand what it's doing or if it still makes sense. But it works. + * * code tests + * + * Two ways to use. With an imgix fm=json response URL, with magic token. + * + * OpenSeadragon("https://somewhere.imgix.net/something?fm=json&osd=imgix") + * + * The osd=imgix is ignored by imgix, just a magic token for OSD to recognize + * it as an imgix URL. The fm=json will use imgix json response to get + * actual image height/width. That first request for fm=json will also + * serve as a 'priming' request for imgix, so it is forced to fetch + * the original image if it hasn't already, before OSD starts asking it + * for lots of tiles. One downside is I've found at least some images + * where imgix fails to get height/width out, even though it can display + * them fine. + * + * Or, direct configuration, you are required to supply height and width: + * + * OpenSeadragon({ type: "imgix", + * baseUrl: "https://somewhere.imgix.net/something", + * width: 1000, + * height: 1000 }) + * + * + * + * + * Copyright (C) 2009 CodePlex Foundation + * Copyright (C) 2010-2013 OpenSeadragon contributors + * + * Redistribution and use in source and binary forms, with or without + * modification, are permitted provided that the following conditions are + * met: + * + * - Redistributions of source code must retain the above copyright notice, + * this list of conditions and the following disclaimer. + * + * - Redistributions in binary form must reproduce the above copyright + * notice, this list of conditions and the following disclaimer in the + * documentation and/or other materials provided with the distribution. + * + * - Neither the name of CodePlex Foundation nor the names of its + * contributors may be used to endorse or promote products derived from + * this software without specific prior written permission. + * + * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS + * "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT + * LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR + * A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT + * OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, + * SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED + * TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR + * PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF + * LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING + * NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS + * SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. + */ + +(function( $ ){ + +/** + * @class ImgixTileSource + * @classdesc OpenSeadragon tile source using imgix.com + * + * @memberof OpenSeadragon + * @extends OpenSeadragon.TileSource + * @see http://iiif.io/api/image/ + */ +$.ImgixTileSource = function( options ){ + /* eslint-disable camelcase */ + this.imgixAutoParam = "compress,format"; // default can be overridden by option + + $.extend( true, this, options ); + + // TODO get height/width from imgix fm=json response if not provided. + if ( !( this.height && this.width && this.baseUrl ) ) { + throw new Error( 'ImgixTileSource required parameters not provided.' ); + } + + options.tileSizePerScaleFactor = {}; + + if ( this.tile_width && this.tile_height ) { + options.tileWidth = this.tile_width; + options.tileHeight = this.tile_height; + } else if ( this.tile_width ) { + options.tileSize = this.tile_width; + } else if ( this.tile_height ) { + options.tileSize = this.tile_height; + } else if ( this.tiles ) { + // Version 2.0 forwards + if ( this.tiles.length == 1 ) { + options.tileWidth = this.tiles[0].width; + // Use height if provided, otherwise assume square tiles and use width. + options.tileHeight = this.tiles[0].height || this.tiles[0].width; + this.scale_factors = this.tiles[0].scaleFactors; + } else { + // Multiple tile sizes at different levels + this.scale_factors = []; + for (var t = 0; t < this.tiles.length; t++ ) { + for (var sf = 0; sf < this.tiles[t].scaleFactors.length; sf++) { + var scaleFactor = this.tiles[t].scaleFactors[sf]; + this.scale_factors.push(scaleFactor); + options.tileSizePerScaleFactor[scaleFactor] = { + width: this.tiles[t].width, + height: this.tiles[t].height || this.tiles[t].width + }; + } + } + } + } else { + // use the largest of tileOptions that is smaller than the short dimension + var shortDim = Math.min( this.height, this.width ), + tileOptions = [256, 512, 1024], + smallerTiles = []; + + for ( var c = 0; c < tileOptions.length; c++ ) { + if ( tileOptions[c] <= shortDim ) { + smallerTiles.push( tileOptions[c] ); + } + } + + if ( smallerTiles.length > 0 ) { + options.tileSize = Math.max.apply( null, smallerTiles ); + } else { + // If we're smaller than 256, just use the short side. + options.tileSize = shortDim; + } + } + + if (!options.maxLevel) { + if (!this.scale_factors) { + options.maxLevel = Number(Math.ceil(Math.log(Math.max(this.width, this.height), 2))); + } else { + options.maxLevel = Math.floor(Math.pow(Math.max.apply(null, this.scale_factors), 0.5)); + } + } + + $.TileSource.apply( this, [ options ] ); +}; + +$.extend( $.ImgixTileSource.prototype, $.TileSource.prototype, /** @lends OpenSeadragon.ImgixTileSource.prototype */{ + /** + * Determine if type imgix, or url is an imgix url + * @function + * @param {Object|Array} data + * @param {String} optional - url + */ + + supports: function( data, url ) { + if (url) { + // You've got to add an artificial "osd=imgix" param to your + // URL so we can recognzie it, nothing in the response lets us reliably be sure. + return url.match(/(\?|\&)osd=imgix(\&|$)/) != null; + } else { + // direct config options + return (data.type && "imgix" == data.type); + } + }, + + /** + * + * @function + * @param {Object} data - the raw configuration + * @example + * { + * "@id" : "http://iiif.example.com/prefix/1E34750D-38DB-4825-A38A-B60A345E591C", + * "width" : 6000, + * "height" : 4000, + * "scale_factors" : [ 1, 2, 4 ], + * "tile_width" : 1024, + * "tile_height" : 1024, + * "formats" : [ "jpg", "png" ], + * } + */ + configure: function( data, url ){ + if (url) { + // configuration from imgix json response, and the data is + // that response. + return { + "width": data["PixelWidth"], + "height": data["PixelHeight"], + "baseUrl": url.replace(/\?.*$/, '') + } + } else { + // configuration from options directly passed into OSD + return data; + } + }, + + /** + * Return the tileWidth for the given level. + * @function + * @param {Number} level + */ + getTileWidth: function( level ) { + var scaleFactor = Math.pow(2, this.maxLevel - level); + + if (this.tileSizePerScaleFactor && this.tileSizePerScaleFactor[scaleFactor]) { + return this.tileSizePerScaleFactor[scaleFactor].width; + } + return this._tileWidth; + }, + + /** + * Return the tileHeight for the given level. + * @function + * @param {Number} level + */ + getTileHeight: function( level ) { + var scaleFactor = Math.pow(2, this.maxLevel - level); + + if (this.tileSizePerScaleFactor && this.tileSizePerScaleFactor[scaleFactor]) { + return this.tileSizePerScaleFactor[scaleFactor].height; + } + return this._tileHeight; + }, + + + + + /** + * Responsible for retrieving the url which will return an image for the + * region specified by the given x, y, and level components. + * @function + * @param {Number} level - z index + * @param {Number} x + * @param {Number} y + * @throws {Error} + */ + getTileUrl: function( level, x, y ){ + //# constants + var IIIF_ROTATION = '0', + //## get the scale (level as a decimal) + scale = Math.pow( 0.5, this.maxLevel - level ), + + //# image dimensions at this level + levelWidth = Math.ceil( this.width * scale ), + levelHeight = Math.ceil( this.height * scale ), + + //## iiif region + tileWidth, + tileHeight, + remoteTileSizeWidth, + remoteTileSizeHeight, + remoteTileX, + remoteTileY, + remoteTileW, + remoteTileH, + remoteSize, + imgixRectValue + + tileWidth = this.getTileWidth(level); + tileHeight = this.getTileHeight(level); + remoteTileSizeWidth = Math.ceil( tileWidth / scale ); + remoteTileSizeHeight = Math.ceil( tileHeight / scale ); + + + if ( levelWidth < tileWidth && levelHeight < tileHeight ){ + remoteSize = levelWidth; + imgixRectValue = ''; + } else { + remoteTileX = x * remoteTileSizeWidth; + remoteTileY = y * remoteTileSizeHeight; + remoteTileW = Math.min( remoteTileSizeWidth, this.width - remoteTileX ); + remoteTileH = Math.min( remoteTileSizeHeight, this.height - remoteTileY ); + + remoteSize = Math.ceil( remoteTileW * scale ); + imgixRectValue = remoteTileX + "," + remoteTileY + "," + remoteTileW + "," + remoteTileH; + } + + + return this.baseUrl + "?" + this.serializeQueryParams({ + "auto": this.imgixAutoParam, + "fm": "jpg", + "rect": imgixRectValue, + "w": remoteSize + }); + }, + + serializeQueryParams: function(obj) { + var str = []; + for(var p in obj) + if (obj.hasOwnProperty(p)) { + str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p])); + } + return str.join("&"); + } + +}); + +}( OpenSeadragon ));