From abc11e3eb6d19a40b8b50162b459eaa401389ac3 Mon Sep 17 00:00:00 2001 From: Takuma Kira Date: Wed, 18 Mar 2020 14:36:56 +0900 Subject: [PATCH 1/6] - Add memorycheck-with-simple-image demo to reproduce "Total canvas memory use exceeds the maximum limit" warning and then "null is not an object (evaluating 'smallContext.drawImage')" error. (To get them, click Create button 12 times on "iPad Air (3rd generation) -- 13.3" Simulator on Mac with Web Inspector by Safari.) --- test/demo/memorycheck-with-simple-image.html | 60 ++++++++++++++++++++ 1 file changed, 60 insertions(+) create mode 100644 test/demo/memorycheck-with-simple-image.html diff --git a/test/demo/memorycheck-with-simple-image.html b/test/demo/memorycheck-with-simple-image.html new file mode 100644 index 00000000..fbcea944 --- /dev/null +++ b/test/demo/memorycheck-with-simple-image.html @@ -0,0 +1,60 @@ + + + + OpenSeadragon Memory Check With Simple Image Demo + + + + +
+ Simple demo page to monitor OpenSeadragon Memory Usage. +
+ + + +
+ + + From 798e49e4b26ad0191a9e95aaea013a65b9f73e73 Mon Sep 17 00:00:00 2001 From: Takuma Kira Date: Wed, 18 Mar 2020 14:37:45 +0900 Subject: [PATCH 2/6] - Add freeupCanvasMemory method on Viewer.destroy method. --- src/imagetilesource.js | 12 ++++++++++++ src/viewer.js | 4 ++++ 2 files changed, 16 insertions(+) diff --git a/src/imagetilesource.js b/src/imagetilesource.js index 375c65d6..d8d2a6d9 100644 --- a/src/imagetilesource.js +++ b/src/imagetilesource.js @@ -195,6 +195,18 @@ } return context; }, + /** + * Free up canvas memory + * (iOS 12 or higher on 2GB RAM device has only 224MB canvas memory, + * and Safari keeps canvas until its height and width will be set to 0). + * @function + */ + freeupCanvasMemory: function () { + for (var i = 0; i < this.levels.length; i++) { + this.levels[i].context2D.canvas.height = 0; + this.levels[i].context2D.canvas.width = 0; + } + }, // private // diff --git a/src/viewer.js b/src/viewer.js index 20e06186..b13483dc 100644 --- a/src/viewer.js +++ b/src/viewer.js @@ -742,6 +742,10 @@ $.extend( $.Viewer.prototype, $.EventSource.prototype, $.ControlDock.prototype, return; } + if (this.source.freeupCanvasMemory) { + this.source.freeupCanvasMemory(); + } + this.close(); this.clearOverlays(); From 6cb57aa66c6dd788b0dab991c37b42b1e436f663 Mon Sep 17 00:00:00 2001 From: Takuma Kira Date: Thu, 19 Mar 2020 12:02:50 +0900 Subject: [PATCH 3/6] - Make ImageTileSource.freeupCanvasMemory method private and call it from ImageTileSource.destroy for consistency. - Add comment to memorycheck-with-simple-image demo how to reproduce the problem. - Simplify memorycheck-with-simple-image demo. --- src/imagetilesource.js | 25 +++++++++++++------- src/viewer.js | 5 ++-- test/demo/memorycheck-with-simple-image.html | 12 +++------- 3 files changed, 22 insertions(+), 20 deletions(-) diff --git a/src/imagetilesource.js b/src/imagetilesource.js index d8d2a6d9..da1c201b 100644 --- a/src/imagetilesource.js +++ b/src/imagetilesource.js @@ -196,16 +196,11 @@ return context; }, /** - * Free up canvas memory - * (iOS 12 or higher on 2GB RAM device has only 224MB canvas memory, - * and Safari keeps canvas until its height and width will be set to 0). + * Destroys ImageTileSource * @function */ - freeupCanvasMemory: function () { - for (var i = 0; i < this.levels.length; i++) { - this.levels[i].context2D.canvas.height = 0; - this.levels[i].context2D.canvas.width = 0; - } + destroy: function () { + this._freeupCanvasMemory(); }, // private @@ -270,7 +265,19 @@ bigContext = smallContext; } return levels; - } + }, + /** + * Free up canvas memory + * (iOS 12 or higher on 2GB RAM device has only 224MB canvas memory, + * and Safari keeps canvas until its height and width will be set to 0). + * @function + */ + _freeupCanvasMemory: function () { + for (var i = 0; i < this.levels.length; i++) { + this.levels[i].context2D.canvas.height = 0; + this.levels[i].context2D.canvas.width = 0; + } + }, }); }(OpenSeadragon)); diff --git a/src/viewer.js b/src/viewer.js index b13483dc..93217150 100644 --- a/src/viewer.js +++ b/src/viewer.js @@ -742,8 +742,9 @@ $.extend( $.Viewer.prototype, $.EventSource.prototype, $.ControlDock.prototype, return; } - if (this.source.freeupCanvasMemory) { - this.source.freeupCanvasMemory(); + //TODO: implement destroy and _freeupCanvasMemory method for all child classes of TileSource, then remove if statement wrap below. + if (this.source.destroy) { + this.source.destroy(); } this.close(); diff --git a/test/demo/memorycheck-with-simple-image.html b/test/demo/memorycheck-with-simple-image.html index fbcea944..c676b062 100644 --- a/test/demo/memorycheck-with-simple-image.html +++ b/test/demo/memorycheck-with-simple-image.html @@ -16,6 +16,9 @@
Simple demo page to monitor OpenSeadragon Memory Usage.
+ @@ -24,13 +27,6 @@ var _viewer; - var generateUniqueHash = (function() { - var counter = 0; - return function() { - return "openseadragon_" + (counter++); - }; - })(); - function createViewer() { if ( _viewer ) { destroyViewer(); @@ -39,8 +35,6 @@ _viewer = OpenSeadragon({ element: document.getElementById("contentDiv"), showNavigationControl: false, - prefixUrl: "../../build/openseadragon/images/", - hash: generateUniqueHash(), //this is only needed if you want to instantiate more than one viewer at a time. tileSources: { type: "image", url: "../data/CCyan.png" From 344ddb924fc028af62d7a74d994dce923f7713e0 Mon Sep 17 00:00:00 2001 From: Takuma Kira Date: Mon, 23 Mar 2020 11:29:07 +0900 Subject: [PATCH 4/6] - Undo removing prefixUrl option in memorycheck-with-simple-image demo. - Define destroy method in TileSource class, call ImageTileSource.freeupCanvasMemory method as optional from TileSource.destroy method and remove TODO. --- src/imagetilesource.js | 25 +++++++------------- src/tilesource.js | 12 +++++++++- src/viewer.js | 5 +--- test/demo/memorycheck-with-simple-image.html | 1 + 4 files changed, 22 insertions(+), 21 deletions(-) diff --git a/src/imagetilesource.js b/src/imagetilesource.js index da1c201b..d8d2a6d9 100644 --- a/src/imagetilesource.js +++ b/src/imagetilesource.js @@ -196,11 +196,16 @@ return context; }, /** - * Destroys ImageTileSource + * Free up canvas memory + * (iOS 12 or higher on 2GB RAM device has only 224MB canvas memory, + * and Safari keeps canvas until its height and width will be set to 0). * @function */ - destroy: function () { - this._freeupCanvasMemory(); + freeupCanvasMemory: function () { + for (var i = 0; i < this.levels.length; i++) { + this.levels[i].context2D.canvas.height = 0; + this.levels[i].context2D.canvas.width = 0; + } }, // private @@ -265,19 +270,7 @@ bigContext = smallContext; } return levels; - }, - /** - * Free up canvas memory - * (iOS 12 or higher on 2GB RAM device has only 224MB canvas memory, - * and Safari keeps canvas until its height and width will be set to 0). - * @function - */ - _freeupCanvasMemory: function () { - for (var i = 0; i < this.levels.length; i++) { - this.levels[i].context2D.canvas.height = 0; - this.levels[i].context2D.canvas.width = 0; - } - }, + } }); }(OpenSeadragon)); diff --git a/src/tilesource.js b/src/tilesource.js index d85f5ee6..5ce151eb 100644 --- a/src/tilesource.js +++ b/src/tilesource.js @@ -615,7 +615,17 @@ $.TileSource.prototype = { y >= 0 && x < numTiles.x && y < numTiles.y; - } + }, + + /** + * Destroys TileSource + * @function + */ + destroy: function () { + if ( this.freeupCanvasMemory ) { + this.freeupCanvasMemory(); + } + }, }; diff --git a/src/viewer.js b/src/viewer.js index 93217150..4653df98 100644 --- a/src/viewer.js +++ b/src/viewer.js @@ -742,10 +742,7 @@ $.extend( $.Viewer.prototype, $.EventSource.prototype, $.ControlDock.prototype, return; } - //TODO: implement destroy and _freeupCanvasMemory method for all child classes of TileSource, then remove if statement wrap below. - if (this.source.destroy) { - this.source.destroy(); - } + this.source.destroy(); this.close(); diff --git a/test/demo/memorycheck-with-simple-image.html b/test/demo/memorycheck-with-simple-image.html index c676b062..292c6994 100644 --- a/test/demo/memorycheck-with-simple-image.html +++ b/test/demo/memorycheck-with-simple-image.html @@ -35,6 +35,7 @@ _viewer = OpenSeadragon({ element: document.getElementById("contentDiv"), showNavigationControl: false, + prefixUrl: "../../build/openseadragon/images/", tileSources: { type: "image", url: "../data/CCyan.png" From c2ed66415fea60f213044388ed8b63eda970d92b Mon Sep 17 00:00:00 2001 From: Takuma Kira Date: Fri, 17 Apr 2020 13:48:53 +0900 Subject: [PATCH 5/6] Revert "- Undo removing prefixUrl option in memorycheck-with-simple-image demo." This reverts commit 344ddb924fc028af62d7a74d994dce923f7713e0. --- src/imagetilesource.js | 25 ++++++++++++++++--------- src/tilesource.js | 12 +----------- src/viewer.js | 5 ++++- 3 files changed, 21 insertions(+), 21 deletions(-) diff --git a/src/imagetilesource.js b/src/imagetilesource.js index d8d2a6d9..da1c201b 100644 --- a/src/imagetilesource.js +++ b/src/imagetilesource.js @@ -196,16 +196,11 @@ return context; }, /** - * Free up canvas memory - * (iOS 12 or higher on 2GB RAM device has only 224MB canvas memory, - * and Safari keeps canvas until its height and width will be set to 0). + * Destroys ImageTileSource * @function */ - freeupCanvasMemory: function () { - for (var i = 0; i < this.levels.length; i++) { - this.levels[i].context2D.canvas.height = 0; - this.levels[i].context2D.canvas.width = 0; - } + destroy: function () { + this._freeupCanvasMemory(); }, // private @@ -270,7 +265,19 @@ bigContext = smallContext; } return levels; - } + }, + /** + * Free up canvas memory + * (iOS 12 or higher on 2GB RAM device has only 224MB canvas memory, + * and Safari keeps canvas until its height and width will be set to 0). + * @function + */ + _freeupCanvasMemory: function () { + for (var i = 0; i < this.levels.length; i++) { + this.levels[i].context2D.canvas.height = 0; + this.levels[i].context2D.canvas.width = 0; + } + }, }); }(OpenSeadragon)); diff --git a/src/tilesource.js b/src/tilesource.js index 5ce151eb..d85f5ee6 100644 --- a/src/tilesource.js +++ b/src/tilesource.js @@ -615,17 +615,7 @@ $.TileSource.prototype = { y >= 0 && x < numTiles.x && y < numTiles.y; - }, - - /** - * Destroys TileSource - * @function - */ - destroy: function () { - if ( this.freeupCanvasMemory ) { - this.freeupCanvasMemory(); - } - }, + } }; diff --git a/src/viewer.js b/src/viewer.js index 4653df98..93217150 100644 --- a/src/viewer.js +++ b/src/viewer.js @@ -742,7 +742,10 @@ $.extend( $.Viewer.prototype, $.EventSource.prototype, $.ControlDock.prototype, return; } - this.source.destroy(); + //TODO: implement destroy and _freeupCanvasMemory method for all child classes of TileSource, then remove if statement wrap below. + if (this.source.destroy) { + this.source.destroy(); + } this.close(); From 9998edb255123d1a31ddde0314a270ba19c89e91 Mon Sep 17 00:00:00 2001 From: Takuma Kira Date: Fri, 17 Apr 2020 14:29:19 +0900 Subject: [PATCH 6/6] Move TileSource.destroy to the right place. --- src/tiledimage.js | 4 ++++ src/viewer.js | 5 ----- 2 files changed, 4 insertions(+), 5 deletions(-) diff --git a/src/tiledimage.js b/src/tiledimage.js index 347a5b3e..cc05cb57 100644 --- a/src/tiledimage.js +++ b/src/tiledimage.js @@ -326,6 +326,10 @@ $.extend($.TiledImage.prototype, $.EventSource.prototype, /** @lends OpenSeadrag */ destroy: function() { this.reset(); + + if (this.source.destroy) { + this.source.destroy(); + } }, /** diff --git a/src/viewer.js b/src/viewer.js index 93217150..20e06186 100644 --- a/src/viewer.js +++ b/src/viewer.js @@ -742,11 +742,6 @@ $.extend( $.Viewer.prototype, $.EventSource.prototype, $.ControlDock.prototype, return; } - //TODO: implement destroy and _freeupCanvasMemory method for all child classes of TileSource, then remove if statement wrap below. - if (this.source.destroy) { - this.source.destroy(); - } - this.close(); this.clearOverlays();