From 079c5a0eece37c2eb4335b1f149802fb5e7053aa Mon Sep 17 00:00:00 2001
From: Marc Aubreville <marc.aubreville@hs-flensburg.de>
Date: Wed, 22 Apr 2026 14:19:42 +0200
Subject: [PATCH 1/2] Added screenshoting

---
 .../annotations/js/exact-image-viewer.js      | 39 +++++++++++++++++++
 .../templates/annotations/annotate.html       |  4 +-
 .../templates/annotations/annotate_v2.html    |  4 +-
 3 files changed, 43 insertions(+), 4 deletions(-)

diff --git a/exact/exact/annotations/static/annotations/js/exact-image-viewer.js b/exact/exact/annotations/static/annotations/js/exact-image-viewer.js
index 589d72b0..74b1a486 100644
--- a/exact/exact/annotations/static/annotations/js/exact-image-viewer.js
+++ b/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;
     }
diff --git a/exact/exact/annotations/templates/annotations/annotate.html b/exact/exact/annotations/templates/annotations/annotate.html
index 740b8a5b..75625b25 100644
--- a/exact/exact/annotations/templates/annotations/annotate.html
+++ b/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>
diff --git a/exact/exact/annotations/templates/annotations/annotate_v2.html b/exact/exact/annotations/templates/annotations/annotate_v2.html
index 9887d920..0b595869 100644
--- a/exact/exact/annotations/templates/annotations/annotate_v2.html
+++ b/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>

From 27c61a8fac140098c8b5dd924cbebbce89d09a42 Mon Sep 17 00:00:00 2001
From: Marc Aubreville <marc.aubreville@hs-flensburg.de>
Date: Wed, 22 Apr 2026 14:21:26 +0200
Subject: [PATCH 2/2] Added files

---
 .../annotations/static/images/screenshot.svg  | 57 +++++++++++++++++++
 .../static/images/screenshot_hover.svg        | 57 +++++++++++++++++++
 2 files changed, 114 insertions(+)
 create mode 100644 exact/exact/annotations/static/images/screenshot.svg
 create mode 100644 exact/exact/annotations/static/images/screenshot_hover.svg

diff --git a/exact/exact/annotations/static/images/screenshot.svg b/exact/exact/annotations/static/images/screenshot.svg
new file mode 100644
index 00000000..b65e1b22
--- /dev/null
+++ b/exact/exact/annotations/static/images/screenshot.svg
@@ -0,0 +1,57 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   width="33.81356"
+   height="33.81356"
+   fill="currentColor"
+   class="bi bi-camera"
+   viewBox="0 0 33.813561 33.813561"
+   version="1.1"
+   id="svg2"
+   sodipodi:docname="screenshot.svg"
+   inkscape:version="1.3.2 (091e20e, 2023-11-25)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs2" />
+  <sodipodi:namedview
+     id="namedview2"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:zoom="14.75"
+     inkscape:cx="13.186441"
+     inkscape:cy="13.186441"
+     inkscape:window-width="1600"
+     inkscape:window-height="898"
+     inkscape:window-x="2387"
+     inkscape:window-y="233"
+     inkscape:window-maximized="0"
+     inkscape:current-layer="svg2" />
+  <path
+     d="m 27.487585,22.863382 c 0,0.851292 -0.690109,1.541401 -1.541401,1.541401 H 7.4493685 c -0.8512923,0 -1.5414011,-0.690109 -1.5414013,-1.541401 v -9.248409 c 2e-7,-0.851292 0.690109,-1.541401 1.5414013,-1.541401 h 1.8065224 c 1.2257801,-6.71e-4 2.4011431,-0.488002 3.2677701,-1.354891 l 1.279364,-1.2762806 c 0.288246,-0.2883346 0.678984,-0.4507269 1.086687,-0.4516306 h 3.613045 c 0.408772,8.72e-5 0.800769,0.1625417 1.089771,0.4516306 l 1.276281,1.2762806 c 0.867382,0.867644 2.044004,1.355038 3.270853,1.354891 h 1.806522 c 0.851292,0 1.541401,0.690109 1.541401,1.541401 z"
+     id="path3"
+     style="opacity:0.7;fill:#333333;stroke-width:1.5414"
+     sodipodi:nodetypes="ssssssccccccccsss" />
+  <rect
+     style="fill:none;stroke:#000000;stroke-width:1;stroke-dasharray:none;stroke-dashoffset:2.7"
+     id="rect2"
+     width="32.81356"
+     height="32.81356"
+     x="0.5"
+     y="0.5"
+     ry="3.6575625" />
+  <path
+     d="m 27.487585,22.863382 a 1.5414013,1.5414013 0 0 1 -1.541401,1.541401 H 7.4493685 A 1.5414013,1.5414013 0 0 1 5.9079672,22.863382 v -9.248409 a 1.5414013,1.5414013 0 0 1 1.5414013,-1.541401 h 1.8065224 a 4.6242038,4.6242038 0 0 0 3.2677701,-1.354891 l 1.279364,-1.2762806 a 1.5414013,1.5414013 0 0 1 1.086687,-0.4516306 h 3.613045 a 1.5414013,1.5414013 0 0 1 1.089771,0.4516306 l 1.276281,1.2762806 a 4.6242038,4.6242038 0 0 0 3.270853,1.354891 h 1.806522 a 1.5414013,1.5414013 0 0 1 1.541401,1.541401 z M 7.4493685,10.532171 a 3.0828026,3.0828026 0 0 0 -3.0828024,3.082802 v 9.248409 a 3.0828026,3.0828026 0 0 0 3.0828024,3.082802 H 25.946184 a 3.0828026,3.0828026 0 0 0 3.082803,-3.082802 V 13.614973 A 3.0828026,3.0828026 0 0 0 25.946184,10.532171 H 24.139662 A 3.0828026,3.0828026 0 0 1 21.960121,9.6289099 L 20.683841,8.3526297 A 3.0828026,3.0828026 0 0 0 18.504298,7.4493685 H 14.891254 A 3.0828026,3.0828026 0 0 0 12.711713,8.3526297 L 11.435432,9.6289099 A 3.0828026,3.0828026 0 0 1 9.2558909,10.532171 Z"
+     id="path1"
+     style="fill:#f9f9f9;stroke-width:1.5414" />
+  <path
+     d="m 16.697777,21.321981 a 3.853504,3.853504 0 1 1 0,-7.707008 3.853504,3.853504 0 0 1 0,7.707008 m 0,1.541401 a 5.394905,5.394905 0 1 0 0,-10.78981 5.394905,5.394905 0 0 0 0,10.78981 M 8.9907698,14.385674 a 0.77070065,0.77070065 0 1 1 -1.5414013,0 0.77070065,0.77070065 0 0 1 1.5414013,0"
+     id="path2"
+     style="fill:#f9f9f9;stroke-width:1.5414" />
+</svg>
diff --git a/exact/exact/annotations/static/images/screenshot_hover.svg b/exact/exact/annotations/static/images/screenshot_hover.svg
new file mode 100644
index 00000000..c783a044
--- /dev/null
+++ b/exact/exact/annotations/static/images/screenshot_hover.svg
@@ -0,0 +1,57 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   width="33.81356"
+   height="33.81356"
+   fill="currentColor"
+   class="bi bi-camera"
+   viewBox="0 0 33.813561 33.813561"
+   version="1.1"
+   id="svg2"
+   sodipodi:docname="screenshot_hover.svg"
+   inkscape:version="1.3.2 (091e20e, 2023-11-25)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs2" />
+  <sodipodi:namedview
+     id="namedview2"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:zoom="14.75"
+     inkscape:cx="13.186441"
+     inkscape:cy="13.186441"
+     inkscape:window-width="1600"
+     inkscape:window-height="898"
+     inkscape:window-x="2387"
+     inkscape:window-y="233"
+     inkscape:window-maximized="0"
+     inkscape:current-layer="svg2" />
+  <path
+     d="m 27.487585,22.863382 c 0,0.851292 -0.690109,1.541401 -1.541401,1.541401 H 7.4493685 c -0.8512923,0 -1.5414011,-0.690109 -1.5414013,-1.541401 v -9.248409 c 2e-7,-0.851292 0.690109,-1.541401 1.5414013,-1.541401 h 1.8065224 c 1.2257801,-6.71e-4 2.4011431,-0.488002 3.2677701,-1.354891 l 1.279364,-1.2762806 c 0.288246,-0.2883346 0.678984,-0.4507269 1.086687,-0.4516306 h 3.613045 c 0.408772,8.72e-5 0.800769,0.1625417 1.089771,0.4516306 l 1.276281,1.2762806 c 0.867382,0.867644 2.044004,1.355038 3.270853,1.354891 h 1.806522 c 0.851292,0 1.541401,0.690109 1.541401,1.541401 z"
+     id="path3"
+     style="opacity:1;fill:#ff7f2a;stroke-width:1.5414"
+     sodipodi:nodetypes="ssssssccccccccsss" />
+  <rect
+     style="fill:none;stroke:#000000;stroke-width:1;stroke-dasharray:none;stroke-dashoffset:2.7"
+     id="rect2"
+     width="32.81356"
+     height="32.81356"
+     x="0.5"
+     y="0.5"
+     ry="3.6575625" />
+  <path
+     d="m 27.487585,22.863382 a 1.5414013,1.5414013 0 0 1 -1.541401,1.541401 H 7.4493685 A 1.5414013,1.5414013 0 0 1 5.9079672,22.863382 v -9.248409 a 1.5414013,1.5414013 0 0 1 1.5414013,-1.541401 h 1.8065224 a 4.6242038,4.6242038 0 0 0 3.2677701,-1.354891 l 1.279364,-1.2762806 a 1.5414013,1.5414013 0 0 1 1.086687,-0.4516306 h 3.613045 a 1.5414013,1.5414013 0 0 1 1.089771,0.4516306 l 1.276281,1.2762806 a 4.6242038,4.6242038 0 0 0 3.270853,1.354891 h 1.806522 a 1.5414013,1.5414013 0 0 1 1.541401,1.541401 z M 7.4493685,10.532171 a 3.0828026,3.0828026 0 0 0 -3.0828024,3.082802 v 9.248409 a 3.0828026,3.0828026 0 0 0 3.0828024,3.082802 H 25.946184 a 3.0828026,3.0828026 0 0 0 3.082803,-3.082802 V 13.614973 A 3.0828026,3.0828026 0 0 0 25.946184,10.532171 H 24.139662 A 3.0828026,3.0828026 0 0 1 21.960121,9.6289099 L 20.683841,8.3526297 A 3.0828026,3.0828026 0 0 0 18.504298,7.4493685 H 14.891254 A 3.0828026,3.0828026 0 0 0 12.711713,8.3526297 L 11.435432,9.6289099 A 3.0828026,3.0828026 0 0 1 9.2558909,10.532171 Z"
+     id="path1"
+     style="fill:#f9f9f9;stroke-width:1.5414" />
+  <path
+     d="m 16.697777,21.321981 a 3.853504,3.853504 0 1 1 0,-7.707008 3.853504,3.853504 0 0 1 0,7.707008 m 0,1.541401 a 5.394905,5.394905 0 1 0 0,-10.78981 5.394905,5.394905 0 0 0 0,10.78981 M 8.9907698,14.385674 a 0.77070065,0.77070065 0 1 1 -1.5414013,0 0.77070065,0.77070065 0 0 1 1.5414013,0"
+     id="path2"
+     style="fill:#f9f9f9;stroke-width:1.5414" />
+</svg>