mirror/openseadragon
1
0
Fork 0
mirror of https://github.com/openseadragon/openseadragon.git synced 2025-02-01 07:31:41 +03:00
Code Issues Projects Releases Wiki Activity

Fix options handling and improve doc.

Browse Source
This commit is contained in:
Antoine Vandecreme 2015-11-04 18:47:41 -05:00
parent 03ed52c5b4
commit 67b0d9bd99
1 changed files with 27 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
src/imagetilesource.js
View File

@ -36,31 +36,30 @@
/** /**
* @class ImageTileSource * @class ImageTileSource
* @classdesc The ImageTileSource allows simple image to be loaded * @classdesc The ImageTileSource allows a simple image to be loaded
* into an OpenSeadragon Viewer. * into an OpenSeadragon Viewer.
* *
* @memberof OpenSeadragon * @memberof OpenSeadragon
* @extends OpenSeadragon.TileSource * @extends OpenSeadragon.TileSource
* @param {Object} options Options object. * @param {Object} options Options object.
* @property {String} options.url URL of the image * @param {String} options.url URL of the image
* @property {Boolean} options.buildPyramid If set to true (default), a * @param {Boolean} [options.buildPyramid=true] If set to true (default), a
* pyramid will be built internally to provide a better downsampling. * pyramid will be built internally to provide a better downsampling.
* @property {String|Boolean} options.crossOriginPolicy Valid values are * @param {String|Boolean} options.crossOriginPolicy Valid values are
* 'Anonymous', 'use-credentials', and false. If false, image requests will * 'Anonymous', 'use-credentials', and false. If false, image requests will
* not use CORS preventing internal pyramid building for images from other * not use CORS preventing internal pyramid building for images from other
* domains. * domains. Inherited from the viewer if not set.
* @property {String|Boolean} options.ajaxWithCredentials Whether to set the * @param {String|Boolean} options.ajaxWithCredentials Whether to set the
* withCredentials XHR flag for AJAX requests (when loading tile sources) * withCredentials XHR flag for AJAX requests (when loading tile sources).
* @property {Boolean} options.useCanvas Set to false to prevent any use of * Inherited from the viewer if not set.
* the canvas API. * @param {Boolean} options.useCanvas Set to false to prevent any use of
* the canvas API. Inherited from the viewer if not set.
*/ */
$.ImageTileSource = function (options) { $.ImageTileSource = function (options) {
$.extend(options, { options = $.extend({
buildPyramid: true, buildPyramid: true
useCanvas: true }, options);
});
this.options = options;
$.TileSource.apply(this, [options]); $.TileSource.apply(this, [options]);
}; };
@ -98,11 +97,11 @@
var image = new Image(); var image = new Image();
var _this = this; var _this = this;
if (this.options.crossOriginPolicy) { if (this.crossOriginPolicy) {
image.crossOrigin = this.options.crossOriginPolicy; image.crossOrigin = this.crossOriginPolicy;
} }
if (this.options.ajaxWithCredentials) { if (this.ajaxWithCredentials) {
image.useCredentials = this.options.ajaxWithCredentials; image.useCredentials = this.ajaxWithCredentials;
} }
$.addEvent(image, 'load', function () { $.addEvent(image, 'load', function () {
@ -114,12 +113,7 @@
_this._tileHeight = _this.height; _this._tileHeight = _this.height;
_this.tileOverlap = 0; _this.tileOverlap = 0;
_this.minLevel = 0; _this.minLevel = 0;
_this.levels = _this._buildLevels(image);
var pyramidMinWidth = _this.buildPyramid ? 1 : _this.width;
var pyramidMinHeight = _this.buildPyramid ? 1 : _this.height;
_this.levels = _this._buildLevels(
image, pyramidMinWidth, pyramidMinHeight);
_this.maxLevel = _this.levels.length - 1; _this.maxLevel = _this.levels.length - 1;
_this.ready = true; _this.ready = true;
@ -223,14 +217,14 @@
* @private Build the differents levels of the pyramid if possible * @private Build the differents levels of the pyramid if possible
* (canvas API enabled and no canvas tainting issue) * (canvas API enabled and no canvas tainting issue)
*/ */
_buildLevels: function (image, minWidth, minHeight) { _buildLevels: function (image) {
var levels = [{ var levels = [{
url: image.src, url: image.src,
width: image.naturalWidth, width: image.naturalWidth,
height: image.naturalHeight height: image.naturalHeight
}]; }];
if (!$.supportsCanvas || !this.useCanvas) { if (!this.buildPyramid || !$.supportsCanvas || !this.useCanvas) {
return levels; return levels;
} }
@ -243,14 +237,19 @@
bigCanvas.width = currentWidth; bigCanvas.width = currentWidth;
bigCanvas.height = currentHeight; bigCanvas.height = currentHeight;
bigContext.drawImage(image, 0, 0, currentWidth, currentHeight); bigContext.drawImage(image, 0, 0, currentWidth, currentHeight);
// We cache the context of the highest level because the browser
// is a lot faster at downsampling something it already has
// downsampled before.
levels[0].context2D = bigContext; levels[0].context2D = bigContext;
if ($.isCanvasTainted(bigContext.canvas)) { if ($.isCanvasTainted(bigCanvas)) {
// If the canvas is tainted, we can't compute the pyramid. // If the canvas is tainted, we can't compute the pyramid.
return levels; return levels;
} }
while (currentWidth >= minWidth * 2 && currentHeight >= minHeight * 2) { // We build smaller levels until either width or height becomes
// 1 pixel wide.
while (currentWidth >= 2 && currentHeight >= 2) {
currentWidth = Math.floor(currentWidth / 2); currentWidth = Math.floor(currentWidth / 2);
currentHeight = Math.floor(currentHeight / 2); currentHeight = Math.floor(currentHeight / 2);
var smallCanvas = document.createElement("canvas"); var smallCanvas = document.createElement("canvas");