Removes elements from annotation screenshot (#1402)

archesproject · Oct 31, 2023 · 90ae9b4 · 90ae9b4
1 parent bce0aa2
commit 90ae9b4
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 3 deletions.
diff --git a/...or_science/media/js/views/components/workflows/project-report-workflow/add-annotations.js b/...or_science/media/js/views/components/workflows/project-report-workflow/add-annotations.js
@@ -190,8 +190,10 @@ define([
         this.screenshot = async() => {
             if (!self.leafletConfig()) { return; }
             const currentdate = new Date();
-            const url = await domToImage.toPng(document.getElementById('annotation-report'), {bgcolor: '#ffffff'});
-            const blob = await domToImage.toBlob(document.getElementById('annotation-report'), {bgcolor: '#ffffff'});
+            const leafletMapElement = document.getElementById('leaflet-map');
+            const leafletMapPane = document.getElementsByClassName('leaflet-map-pane')[0];
+            const url = await domToImage.toPng(leafletMapPane, {bgcolor: '#ffffff', width: leafletMapElement.offsetWidth, height: leafletMapElement.offsetHeight});
+            const blob = await domToImage.toBlob(leafletMapPane, {bgcolor: '#ffffff', width: leafletMapElement.offsetWidth, height: leafletMapElement.offsetHeight});
             const imageName = `${currentdate.getFullYear()}-${currentdate.getMonth() + 1}-${currentdate.getDate()} - ${Date.now()}.png`;
             self.screenshots.push({imageName, url, blob});
         };

diff --git a/..._science/templates/views/components/workflows/project-report-workflow/add-annotations.htm b/..._science/templates/views/components/workflows/project-report-workflow/add-annotations.htm
@@ -61,7 +61,7 @@
     <div id="annotation-report" style="display: inline-flex; flex-direction: column; width: 100%; padding: 10px;">
         <h3 data-bind="text:summaryName"></h3>
         <div data-bind="if: leafletConfig()">
-            <div style="border: solid 1px #ddd">
+            <div id="leaflet-map-cllipped" style="border: solid 1px #ddd">
                 <div id="leaflet-map" class="iiif-leaflet" data-bind="leaflet: leafletConfig" style="height: 500px; width: 100%"></div>
             </div>
         </div>