From 19f7b80dca70fafc8d43733cfa229aae4507264b Mon Sep 17 00:00:00 2001 From: Peter Date: Mon, 30 Jul 2018 20:00:58 -0400 Subject: [PATCH 1/5] Added switch to smoothly or unsmoothly render images on the canvas: imageSmoothingEnabled (true (default), false). Medical images can thus be displayed in more pixelated, unsmoothed manner. --- src/drawer.js | 13 ++++++++++--- src/navigator.js | 10 ++++++++++ src/openseadragon.js | 5 +++++ src/tiledimage.js | 42 +++++++++++++++++++++++++++++++++++++++--- src/viewer.js | 5 +++++ 5 files changed, 69 insertions(+), 6 deletions(-) diff --git a/src/drawer.js b/src/drawer.js index fbf66a76..863f363b 100644 --- a/src/drawer.js +++ b/src/drawer.js @@ -300,12 +300,13 @@ $.Drawer.prototype = { * @param {Float} [scale=1] - Apply a scale to tile position and size. Defaults to 1. * @param {OpenSeadragon.Point} [translate] A translation vector to offset tile position */ - drawTile: function(tile, drawingHandler, useSketch, scale, translate) { + drawTile: function(tile, drawingHandler, useSketch, scale, translate, imageSmoothingEnabled) { $.console.assert(tile, '[Drawer.drawTile] tile is required'); $.console.assert(drawingHandler, '[Drawer.drawTile] drawingHandler is required'); if (this.useCanvas) { var context = this._getContext(useSketch); + context.imageSmoothingEnabled = imageSmoothingEnabled; scale = scale || 1; tile.drawCanvas(context, drawingHandler, scale, translate); } else { @@ -399,18 +400,22 @@ $.Drawer.prototype = { * @param {String} [options.compositeOperation] - How the image is * composited onto other images; see compositeOperation in * {@link OpenSeadragon.Options} for possible values. + * @param {Boolean} [options.imageSmoothingEnabled] - Wether or not the image is + * drawn smoothly on the canvas; see imageSmoothingEnabled in + * {@link OpenSeadragon.Options} for more explanation. * @param {OpenSeadragon.Rect} [options.bounds] The part of the sketch * canvas to blend in the main canvas. If specified, options.scale and * options.translate get ignored. */ - blendSketch: function(opacity, scale, translate, compositeOperation) { + blendSketch: function(opacity, scale, translate, compositeOperation, imageSmoothingEnabled) { var options = opacity; if (!$.isPlainObject(options)) { options = { opacity: opacity, scale: scale, translate: translate, - compositeOperation: compositeOperation + compositeOperation: compositeOperation, + imageSmoothingEnabled: imageSmoothingEnabled }; } if (!this.useCanvas || !this.sketchCanvas) { @@ -418,10 +423,12 @@ $.Drawer.prototype = { } opacity = options.opacity; compositeOperation = options.compositeOperation; + imageSmoothingEnabled = options.imageSmoothingEnabled; var bounds = options.bounds; this.context.save(); this.context.globalAlpha = opacity; + this.context.imageSmoothingEnabled = imageSmoothingEnabled; if (compositeOperation) { this.context.globalCompositeOperation = compositeOperation; } diff --git a/src/navigator.js b/src/navigator.js index c1bfc6f1..1e0836f4 100644 --- a/src/navigator.js +++ b/src/navigator.js @@ -377,10 +377,15 @@ $.extend( $.Navigator.prototype, $.EventSource.prototype, $.Viewer.prototype, /* _this._matchCompositeOperation(myItem, original); } + function matchImageSmoothingEnabled() { + _this._matchImageSmoothingEnabled(myItem, original); + } + original.addHandler('bounds-change', matchBounds); original.addHandler('clip-change', matchBounds); original.addHandler('opacity-change', matchOpacity); original.addHandler('composite-operation-change', matchCompositeOperation); + original.addHandler('image-rendering-change', matchImageSmoothingEnabled); } }); @@ -418,6 +423,11 @@ $.extend( $.Navigator.prototype, $.EventSource.prototype, $.Viewer.prototype, /* // private _matchCompositeOperation: function(myItem, theirItem) { myItem.setCompositeOperation(theirItem.compositeOperation); + }, + + // private + _matchImageSmoothingEnabled: function(myItem, theirItem) { + myItem.setImageSmoothingEnabled(theirItem.imageSmoothingEnabled); } }); diff --git a/src/openseadragon.js b/src/openseadragon.js index 8f52b599..8a8ad9ad 100644 --- a/src/openseadragon.js +++ b/src/openseadragon.js @@ -198,6 +198,10 @@ * 'destination-over', 'destination-atop', 'destination-in', * 'destination-out', 'lighter', 'copy' or 'xor' * + * @property {Boolean} [imageSmoothingEnabled=true] + * Image smoothing for canvas rendering (only if canvas is used). Not every browser + * is compatible with this option. Valid values are true (default) and false. + * * @property {String|CanvasGradient|CanvasPattern|Function} [placeholderFillStyle=null] * Draws a colored rectangle behind the tile if it is not loaded yet. * You can pass a CSS color value like "#FF8800". @@ -1178,6 +1182,7 @@ function OpenSeadragon( options ){ opacity: 1, preload: false, compositeOperation: null, + imageSmoothingEnabled: true, placeholderFillStyle: null, //REFERENCE STRIP SETTINGS diff --git a/src/tiledimage.js b/src/tiledimage.js index 52012071..4e86b073 100644 --- a/src/tiledimage.js +++ b/src/tiledimage.js @@ -73,6 +73,7 @@ * @param {Number} [options.opacity=1] - Set to draw at proportional opacity. If zero, images will not draw. * @param {Boolean} [options.preload=false] - Set true to load even when the image is hidden by zero opacity. * @param {String} [options.compositeOperation] - How the image is composited onto other images; see compositeOperation in {@link OpenSeadragon.Options} for possible values. + * @param {Boolean} [options.imageSmoothingEnabled] - How the image is rendered on the canvas; see imageSmoothingEnabled in {@link OpenSeadragon.Options} for more explanation. * @param {Boolean} [options.debugMode] - See {@link OpenSeadragon.Options}. * @param {String|CanvasGradient|CanvasPattern|Function} [options.placeholderFillStyle] - See {@link OpenSeadragon.Options}. * @param {String|Boolean} [options.crossOriginPolicy] - See {@link OpenSeadragon.Options}. @@ -177,7 +178,8 @@ $.TiledImage = function( options ) { placeholderFillStyle: $.DEFAULT_SETTINGS.placeholderFillStyle, opacity: $.DEFAULT_SETTINGS.opacity, preload: $.DEFAULT_SETTINGS.preload, - compositeOperation: $.DEFAULT_SETTINGS.compositeOperation + compositeOperation: $.DEFAULT_SETTINGS.compositeOperation, + imageSmoothingEnabled: $.DEFAULT_SETTINGS.imageSmoothingEnabled }, options ); this._preload = this.preload; @@ -899,6 +901,39 @@ $.extend($.TiledImage.prototype, $.EventSource.prototype, /** @lends OpenSeadrag }); }, + /** + * @returns {Boolean} Weather of not the current TiledImage is smoothed on the canvas. + */ + getImageSmoothingEnabled: function() { + return this.imageSmoothingEnabled; + }, + + /** + * @param {Boolean} imageSmoothingEnabled if the tiled image should be drawn smoothly or not. + * @fires OpenSeadragon.TiledImage.event:image-rendering-change + */ + setImageSmoothingEnabled: function(imageSmoothingEnabled) { + if (imageSmoothingEnabled === this.imageSmoothingEnabled) { + return; + } + + this.imageSmoothingEnabled = imageSmoothingEnabled; + this._needsDraw = true; + /** + * Raised when the TiledImage's rendering option has changed. + * @event image-rendering-change + * @memberOf OpenSeadragon.TiledImage + * @type {object} + * @property {Boolean} imageSmoothingEnabled - The new image smoothing value (true or false). + * @property {OpenSeadragon.TiledImage} eventSource - A reference to the + * TiledImage which raised the event. + * @property {?Object} userData - Arbitrary subscriber-defined object. + */ + this.raiseEvent('image-rendering-change', { + imageSmoothingEnabled: this.imageSmoothingEnabled + }); + }, + // private _setScale: function(scale, immediately) { var sameTarget = (this._scaleSpring.target.value === scale); @@ -1945,8 +1980,8 @@ function drawTiles( tiledImage, lastDrawn ) { } for (var i = lastDrawn.length - 1; i >= 0; i--) { - tile = lastDrawn[ i ]; - tiledImage._drawer.drawTile( tile, tiledImage._drawingHandler, useSketch, sketchScale, sketchTranslate ); + tile = lastDrawn[i]; + tiledImage._drawer.drawTile(tile, tiledImage._drawingHandler, useSketch, sketchScale, sketchTranslate, tiledImage.imageSmoothingEnabled); tile.beingDrawn = true; if( tiledImage.viewer ){ @@ -2007,6 +2042,7 @@ function drawTiles( tiledImage, lastDrawn ) { scale: sketchScale, translate: sketchTranslate, compositeOperation: tiledImage.compositeOperation, + imageSmoothingEnabled: tiledImage.imageSmoothingEnabled, bounds: bounds }); if (sketchScale) { diff --git a/src/viewer.js b/src/viewer.js index c9bc2c99..3f299af9 100644 --- a/src/viewer.js +++ b/src/viewer.js @@ -1265,6 +1265,7 @@ $.extend( $.Viewer.prototype, $.EventSource.prototype, $.ControlDock.prototype, * @param {Number} [options.degrees=0] Initial rotation of the tiled image around * its top left corner in degrees. * @param {String} [options.compositeOperation] How the image is composited onto other images. + * @param {String} [options.imageSmoothingEnabled] If the image is drawn smoothly or not on the canvas. * @param {String} [options.crossOriginPolicy] The crossOriginPolicy for this specific image, * overriding viewer.crossOriginPolicy. * @param {Boolean} [options.ajaxWithCredentials] Whether to set withCredentials on tile AJAX @@ -1314,6 +1315,9 @@ $.extend( $.Viewer.prototype, $.EventSource.prototype, $.ControlDock.prototype, if (options.compositeOperation === undefined) { options.compositeOperation = this.compositeOperation; } + if (options.imageSmoothingEnabled === undefined) { + options.imageSmoothingEnabled = this.imageSmoothingEnabled; + } if (options.crossOriginPolicy === undefined) { options.crossOriginPolicy = options.tileSource.crossOriginPolicy !== undefined ? options.tileSource.crossOriginPolicy : this.crossOriginPolicy; } @@ -1427,6 +1431,7 @@ $.extend( $.Viewer.prototype, $.EventSource.prototype, $.ControlDock.prototype, preload: queueItem.options.preload, degrees: queueItem.options.degrees, compositeOperation: queueItem.options.compositeOperation, + imageSmoothingEnabled: queueItem.options.imageSmoothingEnabled, springStiffness: _this.springStiffness, animationTime: _this.animationTime, minZoomImageRatio: _this.minZoomImageRatio, From 17e25c0428e20dda5b373527595b67048c851391 Mon Sep 17 00:00:00 2001 From: Peter Date: Fri, 3 Aug 2018 17:29:48 -0400 Subject: [PATCH 2/5] Revert "Added switch to smoothly or unsmoothly render images on the canvas: imageSmoothingEnabled (true (default), false). Medical images can thus be displayed in more pixelated, unsmoothed manner." This reverts commit 19f7b80dca70fafc8d43733cfa229aae4507264b. --- src/drawer.js | 13 +++---------- src/navigator.js | 10 ---------- src/openseadragon.js | 5 ----- src/tiledimage.js | 42 +++--------------------------------------- src/viewer.js | 5 ----- 5 files changed, 6 insertions(+), 69 deletions(-) diff --git a/src/drawer.js b/src/drawer.js index 863f363b..fbf66a76 100644 --- a/src/drawer.js +++ b/src/drawer.js @@ -300,13 +300,12 @@ $.Drawer.prototype = { * @param {Float} [scale=1] - Apply a scale to tile position and size. Defaults to 1. * @param {OpenSeadragon.Point} [translate] A translation vector to offset tile position */ - drawTile: function(tile, drawingHandler, useSketch, scale, translate, imageSmoothingEnabled) { + drawTile: function(tile, drawingHandler, useSketch, scale, translate) { $.console.assert(tile, '[Drawer.drawTile] tile is required'); $.console.assert(drawingHandler, '[Drawer.drawTile] drawingHandler is required'); if (this.useCanvas) { var context = this._getContext(useSketch); - context.imageSmoothingEnabled = imageSmoothingEnabled; scale = scale || 1; tile.drawCanvas(context, drawingHandler, scale, translate); } else { @@ -400,22 +399,18 @@ $.Drawer.prototype = { * @param {String} [options.compositeOperation] - How the image is * composited onto other images; see compositeOperation in * {@link OpenSeadragon.Options} for possible values. - * @param {Boolean} [options.imageSmoothingEnabled] - Wether or not the image is - * drawn smoothly on the canvas; see imageSmoothingEnabled in - * {@link OpenSeadragon.Options} for more explanation. * @param {OpenSeadragon.Rect} [options.bounds] The part of the sketch * canvas to blend in the main canvas. If specified, options.scale and * options.translate get ignored. */ - blendSketch: function(opacity, scale, translate, compositeOperation, imageSmoothingEnabled) { + blendSketch: function(opacity, scale, translate, compositeOperation) { var options = opacity; if (!$.isPlainObject(options)) { options = { opacity: opacity, scale: scale, translate: translate, - compositeOperation: compositeOperation, - imageSmoothingEnabled: imageSmoothingEnabled + compositeOperation: compositeOperation }; } if (!this.useCanvas || !this.sketchCanvas) { @@ -423,12 +418,10 @@ $.Drawer.prototype = { } opacity = options.opacity; compositeOperation = options.compositeOperation; - imageSmoothingEnabled = options.imageSmoothingEnabled; var bounds = options.bounds; this.context.save(); this.context.globalAlpha = opacity; - this.context.imageSmoothingEnabled = imageSmoothingEnabled; if (compositeOperation) { this.context.globalCompositeOperation = compositeOperation; } diff --git a/src/navigator.js b/src/navigator.js index 1e0836f4..c1bfc6f1 100644 --- a/src/navigator.js +++ b/src/navigator.js @@ -377,15 +377,10 @@ $.extend( $.Navigator.prototype, $.EventSource.prototype, $.Viewer.prototype, /* _this._matchCompositeOperation(myItem, original); } - function matchImageSmoothingEnabled() { - _this._matchImageSmoothingEnabled(myItem, original); - } - original.addHandler('bounds-change', matchBounds); original.addHandler('clip-change', matchBounds); original.addHandler('opacity-change', matchOpacity); original.addHandler('composite-operation-change', matchCompositeOperation); - original.addHandler('image-rendering-change', matchImageSmoothingEnabled); } }); @@ -423,11 +418,6 @@ $.extend( $.Navigator.prototype, $.EventSource.prototype, $.Viewer.prototype, /* // private _matchCompositeOperation: function(myItem, theirItem) { myItem.setCompositeOperation(theirItem.compositeOperation); - }, - - // private - _matchImageSmoothingEnabled: function(myItem, theirItem) { - myItem.setImageSmoothingEnabled(theirItem.imageSmoothingEnabled); } }); diff --git a/src/openseadragon.js b/src/openseadragon.js index 8a8ad9ad..8f52b599 100644 --- a/src/openseadragon.js +++ b/src/openseadragon.js @@ -198,10 +198,6 @@ * 'destination-over', 'destination-atop', 'destination-in', * 'destination-out', 'lighter', 'copy' or 'xor' * - * @property {Boolean} [imageSmoothingEnabled=true] - * Image smoothing for canvas rendering (only if canvas is used). Not every browser - * is compatible with this option. Valid values are true (default) and false. - * * @property {String|CanvasGradient|CanvasPattern|Function} [placeholderFillStyle=null] * Draws a colored rectangle behind the tile if it is not loaded yet. * You can pass a CSS color value like "#FF8800". @@ -1182,7 +1178,6 @@ function OpenSeadragon( options ){ opacity: 1, preload: false, compositeOperation: null, - imageSmoothingEnabled: true, placeholderFillStyle: null, //REFERENCE STRIP SETTINGS diff --git a/src/tiledimage.js b/src/tiledimage.js index 4e86b073..52012071 100644 --- a/src/tiledimage.js +++ b/src/tiledimage.js @@ -73,7 +73,6 @@ * @param {Number} [options.opacity=1] - Set to draw at proportional opacity. If zero, images will not draw. * @param {Boolean} [options.preload=false] - Set true to load even when the image is hidden by zero opacity. * @param {String} [options.compositeOperation] - How the image is composited onto other images; see compositeOperation in {@link OpenSeadragon.Options} for possible values. - * @param {Boolean} [options.imageSmoothingEnabled] - How the image is rendered on the canvas; see imageSmoothingEnabled in {@link OpenSeadragon.Options} for more explanation. * @param {Boolean} [options.debugMode] - See {@link OpenSeadragon.Options}. * @param {String|CanvasGradient|CanvasPattern|Function} [options.placeholderFillStyle] - See {@link OpenSeadragon.Options}. * @param {String|Boolean} [options.crossOriginPolicy] - See {@link OpenSeadragon.Options}. @@ -178,8 +177,7 @@ $.TiledImage = function( options ) { placeholderFillStyle: $.DEFAULT_SETTINGS.placeholderFillStyle, opacity: $.DEFAULT_SETTINGS.opacity, preload: $.DEFAULT_SETTINGS.preload, - compositeOperation: $.DEFAULT_SETTINGS.compositeOperation, - imageSmoothingEnabled: $.DEFAULT_SETTINGS.imageSmoothingEnabled + compositeOperation: $.DEFAULT_SETTINGS.compositeOperation }, options ); this._preload = this.preload; @@ -901,39 +899,6 @@ $.extend($.TiledImage.prototype, $.EventSource.prototype, /** @lends OpenSeadrag }); }, - /** - * @returns {Boolean} Weather of not the current TiledImage is smoothed on the canvas. - */ - getImageSmoothingEnabled: function() { - return this.imageSmoothingEnabled; - }, - - /** - * @param {Boolean} imageSmoothingEnabled if the tiled image should be drawn smoothly or not. - * @fires OpenSeadragon.TiledImage.event:image-rendering-change - */ - setImageSmoothingEnabled: function(imageSmoothingEnabled) { - if (imageSmoothingEnabled === this.imageSmoothingEnabled) { - return; - } - - this.imageSmoothingEnabled = imageSmoothingEnabled; - this._needsDraw = true; - /** - * Raised when the TiledImage's rendering option has changed. - * @event image-rendering-change - * @memberOf OpenSeadragon.TiledImage - * @type {object} - * @property {Boolean} imageSmoothingEnabled - The new image smoothing value (true or false). - * @property {OpenSeadragon.TiledImage} eventSource - A reference to the - * TiledImage which raised the event. - * @property {?Object} userData - Arbitrary subscriber-defined object. - */ - this.raiseEvent('image-rendering-change', { - imageSmoothingEnabled: this.imageSmoothingEnabled - }); - }, - // private _setScale: function(scale, immediately) { var sameTarget = (this._scaleSpring.target.value === scale); @@ -1980,8 +1945,8 @@ function drawTiles( tiledImage, lastDrawn ) { } for (var i = lastDrawn.length - 1; i >= 0; i--) { - tile = lastDrawn[i]; - tiledImage._drawer.drawTile(tile, tiledImage._drawingHandler, useSketch, sketchScale, sketchTranslate, tiledImage.imageSmoothingEnabled); + tile = lastDrawn[ i ]; + tiledImage._drawer.drawTile( tile, tiledImage._drawingHandler, useSketch, sketchScale, sketchTranslate ); tile.beingDrawn = true; if( tiledImage.viewer ){ @@ -2042,7 +2007,6 @@ function drawTiles( tiledImage, lastDrawn ) { scale: sketchScale, translate: sketchTranslate, compositeOperation: tiledImage.compositeOperation, - imageSmoothingEnabled: tiledImage.imageSmoothingEnabled, bounds: bounds }); if (sketchScale) { diff --git a/src/viewer.js b/src/viewer.js index 3f299af9..c9bc2c99 100644 --- a/src/viewer.js +++ b/src/viewer.js @@ -1265,7 +1265,6 @@ $.extend( $.Viewer.prototype, $.EventSource.prototype, $.ControlDock.prototype, * @param {Number} [options.degrees=0] Initial rotation of the tiled image around * its top left corner in degrees. * @param {String} [options.compositeOperation] How the image is composited onto other images. - * @param {String} [options.imageSmoothingEnabled] If the image is drawn smoothly or not on the canvas. * @param {String} [options.crossOriginPolicy] The crossOriginPolicy for this specific image, * overriding viewer.crossOriginPolicy. * @param {Boolean} [options.ajaxWithCredentials] Whether to set withCredentials on tile AJAX @@ -1315,9 +1314,6 @@ $.extend( $.Viewer.prototype, $.EventSource.prototype, $.ControlDock.prototype, if (options.compositeOperation === undefined) { options.compositeOperation = this.compositeOperation; } - if (options.imageSmoothingEnabled === undefined) { - options.imageSmoothingEnabled = this.imageSmoothingEnabled; - } if (options.crossOriginPolicy === undefined) { options.crossOriginPolicy = options.tileSource.crossOriginPolicy !== undefined ? options.tileSource.crossOriginPolicy : this.crossOriginPolicy; } @@ -1431,7 +1427,6 @@ $.extend( $.Viewer.prototype, $.EventSource.prototype, $.ControlDock.prototype, preload: queueItem.options.preload, degrees: queueItem.options.degrees, compositeOperation: queueItem.options.compositeOperation, - imageSmoothingEnabled: queueItem.options.imageSmoothingEnabled, springStiffness: _this.springStiffness, animationTime: _this.animationTime, minZoomImageRatio: _this.minZoomImageRatio, From 9968025782997455fb1068f28a2e40110f9fdecb Mon Sep 17 00:00:00 2001 From: Peter Date: Fri, 3 Aug 2018 18:47:16 -0400 Subject: [PATCH 3/5] Simplified imageSmoothingEnabled Option. The option can be set during viewer creation and also later with the function viewer.drawer.setImageSmoothingEnabled(). --- src/drawer.js | 22 ++++++++++++++++++++++ src/openseadragon.js | 6 ++++++ src/viewer.js | 6 ++++++ 3 files changed, 34 insertions(+) diff --git a/src/drawer.js b/src/drawer.js index fbf66a76..be3a73b7 100644 --- a/src/drawer.js +++ b/src/drawer.js @@ -600,6 +600,28 @@ $.Drawer.prototype = { } }, + + /** + * Turns image smoothing on or off for this viewer. Note: Ignored in some (especially older) browsers that do not support this property. + * + * @function + * @param {Boolean} [imageSmoothingEnabled] - Whether or not the image is + * drawn smoothly on the canvas; see imageSmoothingEnabled in + * {@link OpenSeadragon.Options} for more explanation. + */ + setImageSmoothingEnabled: function(imageSmoothingEnabled){ + if ( this.useCanvas ) { + this.context.mozImageSmoothingEnabled = imageSmoothingEnabled; + this.context.webkitImageSmoothingEnabled = imageSmoothingEnabled; + this.context.msImageSmoothingEnabled = imageSmoothingEnabled; + this.context.imageSmoothingEnabled = imageSmoothingEnabled; + + this.context.restore(); + + this.viewer.world.draw(); + } + }, + /** * Get the canvas size * @param {Boolean} sketch If set to true return the size of the sketch canvas diff --git a/src/openseadragon.js b/src/openseadragon.js index 8f52b599..77616346 100644 --- a/src/openseadragon.js +++ b/src/openseadragon.js @@ -198,6 +198,11 @@ * 'destination-over', 'destination-atop', 'destination-in', * 'destination-out', 'lighter', 'copy' or 'xor' * + * @property {Boolean} [imageSmoothingEnabled=true] + * Image smoothing for canvas rendering (only if canvas is used). Note: Ignored + * by some (especially older) browsers which do not support this canvas property. + * This property can be changed in {@link Viewer.Drawer.setImageSmoothingEnabled}. + * * @property {String|CanvasGradient|CanvasPattern|Function} [placeholderFillStyle=null] * Draws a colored rectangle behind the tile if it is not loaded yet. * You can pass a CSS color value like "#FF8800". @@ -1178,6 +1183,7 @@ function OpenSeadragon( options ){ opacity: 1, preload: false, compositeOperation: null, + imageSmoothingEnabled: true, placeholderFillStyle: null, //REFERENCE STRIP SETTINGS diff --git a/src/viewer.js b/src/viewer.js index c9bc2c99..2ccea983 100644 --- a/src/viewer.js +++ b/src/viewer.js @@ -466,6 +466,12 @@ $.Viewer = function( options ) { $.requestAnimationFrame( function(){ beginControlsAutoHide( _this ); } ); + + // Initial canvas options + if ( this.imageSmoothingEnabled !== undefined && !this.imageSmoothingEnabled){ + this.drawer.setImageSmoothingEnabled(this.imageSmoothingEnabled); + } + }; $.extend( $.Viewer.prototype, $.EventSource.prototype, $.ControlDock.prototype, /** @lends OpenSeadragon.Viewer.prototype */{ From d892dcfbc7436571633892a0510784d90c0f9e73 Mon Sep 17 00:00:00 2001 From: Peter Date: Wed, 8 Aug 2018 20:05:46 -0400 Subject: [PATCH 4/5] Repaired Minor issues --- src/drawer.js | 14 ++++++++------ 1 file changed, 8 insertions(+), 6 deletions(-) diff --git a/src/drawer.js b/src/drawer.js index be3a73b7..24023c84 100644 --- a/src/drawer.js +++ b/src/drawer.js @@ -611,14 +611,16 @@ $.Drawer.prototype = { */ setImageSmoothingEnabled: function(imageSmoothingEnabled){ if ( this.useCanvas ) { - this.context.mozImageSmoothingEnabled = imageSmoothingEnabled; - this.context.webkitImageSmoothingEnabled = imageSmoothingEnabled; - this.context.msImageSmoothingEnabled = imageSmoothingEnabled; - this.context.imageSmoothingEnabled = imageSmoothingEnabled; + var context = this.context; + context.save(); + context.mozImageSmoothingEnabled = imageSmoothingEnabled; + context.webkitImageSmoothingEnabled = imageSmoothingEnabled; + context.msImageSmoothingEnabled = imageSmoothingEnabled; + context.imageSmoothingEnabled = imageSmoothingEnabled; - this.context.restore(); + context.restore(); - this.viewer.world.draw(); + this.viewer.forceRedraw(); } }, From 9511cf2d00e0b7fa995259824a5c346f6e38050c Mon Sep 17 00:00:00 2001 From: Peter Date: Fri, 10 Aug 2018 03:46:25 -0400 Subject: [PATCH 5/5] Removed save/restore for canvas --- src/drawer.js | 3 --- 1 file changed, 3 deletions(-) diff --git a/src/drawer.js b/src/drawer.js index 24023c84..f3ecada4 100644 --- a/src/drawer.js +++ b/src/drawer.js @@ -612,14 +612,11 @@ $.Drawer.prototype = { setImageSmoothingEnabled: function(imageSmoothingEnabled){ if ( this.useCanvas ) { var context = this.context; - context.save(); context.mozImageSmoothingEnabled = imageSmoothingEnabled; context.webkitImageSmoothingEnabled = imageSmoothingEnabled; context.msImageSmoothingEnabled = imageSmoothingEnabled; context.imageSmoothingEnabled = imageSmoothingEnabled; - context.restore(); - this.viewer.forceRedraw(); } },