OwsContextDirective / fix exportMapAsImage for ol6

A new library has been added: dom-to-image This is necessary now that OL6 does not have only one canvas in the map
geonetwork · Dec 3, 2019 · 3c0a01e · 3c0a01e
1 parent 600a015
commit 3c0a01e
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 27 deletions.
diff --git a/web-ui/src/main/resources/WEB-INF/classes/web-ui-wro-sources.xml b/web-ui/src/main/resources/WEB-INF/classes/web-ui-wro-sources.xml
@@ -92,6 +92,7 @@
     <jsSource webappPath="/catalog/lib/recaptcha/angular-recaptcha.min.js" minimize="false"/>
     <jsSource webappPath="/catalog/lib/geohash.js"/>
     <jsSource webappPath="/catalog/lib/xml2json/xml2json.min.js" minimize="false"/>
+    <jsSource webappPath="/catalog/lib/dom-to-image/dom-to-image.min.js" minimize="false"/>
   </declarative>
   <!-- Same as previous + olcesium -->
   <declarative name="lib3d" pathOnDisk="web-ui/src/main/resources">
@@ -161,5 +162,6 @@
     <jsSource webappPath="/catalog/lib/recaptcha/angular-recaptcha.min.js" minimize="false"/>
     <jsSource webappPath="/catalog/lib/geohash.js"/>
     <jsSource webappPath="/catalog/lib/xml2json/xml2json.min.js" minimize="false"/>
+    <jsSource webappPath="/catalog/lib/dom-to-image/dom-to-image.min.js" minimize="false"/>
   </declarative>
 </sources>
diff --git a/web-ui/src/main/resources/catalog/components/viewer/owscontext/OwsContextDirective.js b/web-ui/src/main/resources/catalog/components/viewer/owscontext/OwsContextDirective.js
@@ -106,25 +106,36 @@
                 '-c' + scope.map.getView().getCenter().join('-');
           };
 
+          /**
+           * @type {HTMLAnchorElement}
+           */
+          var downloadEl = element.find('.download-element')[0];
+
           function getMapAsImage($event, scaleFactor) {
             var defer = $q.defer();
             if (scope.isExportMapAsImageEnabled) {
               scope.mapFileName = getMapFileName();
 
-              scope.map.once('postcompose', function(event) {
-                var canvas = event.context.canvas;
-
-                var resizedCanvas = document.createElement('canvas');
-                var resizedContext = resizedCanvas.getContext('2d');
-                scaleFactor = scaleFactor || 1;
-                resizedCanvas.height = canvas.height * scaleFactor;
-                resizedCanvas.width = canvas.width * scaleFactor;
-
-                resizedContext.drawImage(canvas, 0, 0,
-                    resizedCanvas.width, resizedCanvas.height);
+              scope.map.once('postrender', function(event) {
+                domtoimage.toPng(scope.map.getTargetElement()).then(function(data) {
+                  // resize if necessary
+                  var finalData = data;
+
+                  if (scaleFactor !== undefined) {
+                    var img = new Image();
+                    img.src = data;
+                    img.onload = function() {
+                      var canvas = document.createElement('canvas');
+                      var size = scope.map.getSize();
+                      canvas.width = size[0];
+                      canvas.height = size[1];
+                      canvas.getContext('2d').drawImage(img, 0, 0, canvas.width, canvas.height);
+                      finalData = canvas.toDataURL('image/png');
+                    };
+                  }
 
-                var data = resizedCanvas.toDataURL('image/png');
-                defer.resolve(data);
+                  defer.resolve(finalData);
+                });
               });
               scope.map.renderSync();
             } else {
@@ -133,14 +144,13 @@
             return defer.promise;
           };
 
-          function openContent($event, data) {
-            var el = $($event.target);
-            if (!el.is('a')) {
-              el = el.parent();
-            }
-            if (el.is('a')) {
-              el.attr('href', data);
-            }
+          function openContent(data, fileName) {
+            // execute logic after current loop to avoid angular "digest in progress" error
+            setTimeout(function() {
+              downloadEl.href = data;
+              downloadEl.download = fileName;
+              downloadEl.click();
+            });
           };
 
           scope.save = function($event) {
@@ -150,12 +160,12 @@
             var str = new XMLSerializer().serializeToString(xml);
             var base64 = base64EncArr(strToUTF8Arr(str));
 
-            openContent($event, 'data:text/xml;charset=utf-8;base64,' + base64);
+            openContent('data:text/xml;charset=utf-8;base64,' + base64, getMapFileName() + '.xml');
           };
 
           scope.saveMapAsImage = function($event) {
             getMapAsImage($event).then(function(data) {
-              openContent($event, data);
+              openContent(data, getMapFileName() + '.png');
             });
           };
 

diff --git a/web-ui/src/main/resources/catalog/components/viewer/owscontext/partials/owscontext.html b/web-ui/src/main/resources/catalog/components/viewer/owscontext/partials/owscontext.html
@@ -1,4 +1,5 @@
 <div class="context">
+  <a href="" class="hidden download-element"></a>
   <form class="form-horizontal clearfix"
         role="form"
         data-ng-controller="gnsMapSearchController"
@@ -42,15 +43,13 @@ <h4 data-translate="">downloadContext</h4>
   <div class="btn-group" role="group">
     <a class="btn btn-default"
         data-ng-click="save($event)"
-        title="{{'downloadContext'|translate}}"
-        download="{{mapFileName}}.xml">
+        title="{{'downloadContext'|translate}}">
       <i class="fa fa-file-code-o"></i>&nbsp;
       <span data-translate="">saveMapAsContext</span>
     </a>
     <a class="btn btn-default"
         data-ng-if="isExportMapAsImageEnabled"
-        data-ng-click="saveMapAsImage($event)"
-        download="{{mapFileName}}.png">
+        data-ng-click="saveMapAsImage($event)">
       <i class="fa fa-file-image-o"></i>&nbsp;
       <span data-translate="">saveMapAsImage</span>
     </a>

diff --git a/web/src/main/webapp/xslt/base-layout-cssjs-loader.xsl b/web/src/main/webapp/xslt/base-layout-cssjs-loader.xsl
@@ -185,6 +185,7 @@
         <script src="{$uiResourcesPath}lib/geohash.js?v={$buildNumber}"></script>
 
         <script src="{$uiResourcesPath}lib/xml2json/xml2json.min.js?v={$buildNumber}"></script>
+        <script src="{$uiResourcesPath}lib/dom-to-image/dom-to-image.min.js?v={$buildNumber}"></script>
       </xsl:when>
       <xsl:otherwise>
       </xsl:otherwise>