https://www.cryptopunks.app/openseadragon/openseadragon-canvas-overlay.js

1// OpenSeadragon canvas Overlay plugin 0.0.2 based on svg overlay plugin
2
3(function () {
4  if (!window.OpenSeadragon) {
5    console.error("[openseadragon-canvas-overlay] requires OpenSeadragon");
6    return;
7  }
8
9  // ----------
10  OpenSeadragon.Viewer.prototype.canvasOverlay = function (options) {
11    if (this._canvasOverlayInfo) {
12      return this._canvasOverlayInfo;
13    }
14
15    this._canvasOverlayInfo = new Overlay(this, options);
16    return this._canvasOverlayInfo;
17  };
18
19  // ----------
20  var Overlay = function (viewer, options) {
21    var self = this;
22    this._viewer = viewer;
23
24    this._containerWidth = 0;
25    this._containerHeight = 0;
26
27    this._canvasdiv = document.createElement("div");
28    this._canvasdiv.style.position = "absolute";
29    this._canvasdiv.style.left = 0;
30    this._canvasdiv.style.top = 0;
31    this._canvasdiv.style.width = "100%";
32    this._canvasdiv.style.height = "100%";
33    this._viewer.canvas.parentNode.insertBefore(
34      this._canvasdiv,
35      this._viewer.canvas,
36    );
37
38    this._canvas = document.createElement("canvas");
39    this._canvasdiv.appendChild(this._canvas);
40
41    this.onRedraw = options.onRedraw || function () {};
42    this.clearBeforeRedraw =
43      typeof options.clearBeforeRedraw !== "undefined"
44        ? options.clearBeforeRedraw
45        : true;
46
47    this._viewer.addHandler("update-viewport", function () {
48      self.resize();
49      self._updateCanvas();
50    });
51
52    this._viewer.addHandler("open", function () {
53      self.resize();
54      self._updateCanvas();
55    });
56  };
57
58  // ----------
59  Overlay.prototype = {
60    // ----------
61    canvas: function () {
62      return this._canvas;
63    },
64    // ----------
65    context2d: function () {
66      return this._canvas.getContext("2d");
67    },
68    // ----------
69    clear: function () {
70      this._canvas
71        .getContext("2d")
72        .clearRect(0, 0, this._containerWidth, this._containerHeight);
73    },
74    // ----------
75    resize: function () {
76      if (this._containerWidth !== this._viewer.container.clientWidth) {
77        this._containerWidth = this._viewer.container.clientWidth;
78        this._canvasdiv.setAttribute("width", this._containerWidth);
79        this._canvas.setAttribute("width", this._containerWidth);
80      }
81
82      if (this._containerHeight !== this._viewer.container.clientHeight) {
83        this._containerHeight = this._viewer.container.clientHeight;
84        this._canvasdiv.setAttribute("height", this._containerHeight);
85        this._canvas.setAttribute("height", this._containerHeight);
86      }
87      this._viewportOrigin = new OpenSeadragon.Point(0, 0);
88      var boundsRect = this._viewer.viewport.getBounds(true);
89      this._viewportOrigin.x = boundsRect.x;
90      this._viewportOrigin.y = boundsRect.y * this.imgAspectRatio;
91
92      this._viewportWidth = boundsRect.width;
93      this._viewportHeight = boundsRect.height * this.imgAspectRatio;
94      var image1 = this._viewer.world.getItemAt(0);
95      this.imgWidth = image1.source.dimensions.x;
96      this.imgHeight = image1.source.dimensions.y;
97      this.imgAspectRatio = this.imgWidth / this.imgHeight;
98    },
99    _updateCanvas: function () {
100      var viewportZoom = this._viewer.viewport.getZoom(true);
101      var image1 = this._viewer.world.getItemAt(0);
102      var zoom = image1.viewportToImageZoom(viewportZoom);
103
104      var x =
105        ((this._viewportOrigin.x / this.imgWidth - this._viewportOrigin.x) /
106          this._viewportWidth) *
107        this._containerWidth;
108      var y =
109        ((this._viewportOrigin.y / this.imgHeight - this._viewportOrigin.y) /
110          this._viewportHeight) *
111        this._containerHeight;
112
113      if (this.clearBeforeRedraw) this.clear();
114      this._canvas.getContext("2d").translate(x, y);
115      this._canvas.getContext("2d").scale(zoom, zoom);
116      this.onRedraw();
117      this._canvas.getContext("2d").setTransform(1, 0, 0, 1, 0, 0);
118    },
119  };
120})();