Screenshotting

exact/exact/annotations/static/annotations/js/exact-image-viewer.js

@@ -609,6 +609,18 @@ class EXACTViewer {
         });
         viewer.buttons.buttons.push(showNavigationButton);
         viewer.buttons.element.appendChild(showNavigationButton.element);
+
+        let screenshotButton = new OpenSeadragon.Button({
+            tooltip: 'Download screenshot of current view',
+            name: "Screenshot",
+            srcRest: viewer.prefixUrl + `screenshot.svg`,
+            srcGroup: viewer.prefixUrl + `screenshot.svg`,
+            srcHover: viewer.prefixUrl + `screenshot_hover.svg`,
+            srcDown: viewer.prefixUrl + `screenshot.svg`,
+            onClick: this.takeScreenshot.bind(this),
+        });
+        viewer.buttons.buttons.push(screenshotButton);
+        viewer.buttons.element.appendChild(screenshotButton.element);
     }
 
     handleKeyUp(event) {
@@ -665,6 +677,33 @@ class EXACTViewer {
         }
     }
 
+    takeScreenshot() {
+        const osdCanvas = this.viewer.drawer.canvas;
+        const overlayCanvas = document.getElementById('osd-overlaycanvas');
+
+        const width = osdCanvas.width;
+        const height = osdCanvas.height;
+
+        const composite = document.createElement('canvas');
+        composite.width = width;
+        composite.height = height;
+        const ctx = composite.getContext('2d');
+
+        ctx.drawImage(osdCanvas, 0, 0);
+        if (overlayCanvas) {
+            ctx.drawImage(overlayCanvas, 0, 0);
+        }
+
+        const imageName = (this.imageInformation && this.imageInformation.name)
+            ? this.imageInformation.name.replace(/\.[^.]+$/, '')
+            : 'screenshot';
+
+        const link = document.createElement('a');
+        link.download = imageName + '_screenshot.png';
+        link.href = composite.toDataURL('image/png');
+        link.click();
+    }
+
     finishAnnotation() {
         return;
     }

exact/exact/annotations/templates/annotations/annotate.html

@@ -860,8 +860,8 @@ <h5 id="active_image_name">{{ selected_image.name }}</h5>
             <div style="height: 85vh;">
                 <div class="seadragon-viewer" id="openseadragon_background"  style="position: absolute; height: 85vh; width: 100%">
                 </div>
-                <div class="seadragon-viewer" id="openseadragon1" style="position: absolute; height: 85vh; width: 100%">        
-                </div>    
+                <div class="seadragon-viewer" id="openseadragon1" style="position: absolute; height: 85vh; width: 100%">
+                </div>
             </div>
             <div id="frameSlider" style="width: 35vw;"></div>
         </div>

exact/exact/annotations/templates/annotations/annotate_v2.html

@@ -875,8 +875,8 @@ <h5 id="active_image_name">{{ selected_image.name }}</h5>
             <div style="height: 85vh;">
                 <div class="seadragon-viewer" id="openseadragon_background"  style="position: absolute; height: 85vh; width: 98%">
                 </div>
-                <div class="seadragon-viewer" id="openseadragon1" style="position: absolute; height: 85vh; width: 98%">        
-                </div>    
+                <div class="seadragon-viewer" id="openseadragon1" style="position: absolute; height: 85vh; width: 98%">
+                </div>
             </div>
             <div id="frameSlider" style="width: 60vw;"></div>
         </div>