remove overlay and html-to-image

examples/export-map.css

@@ -1,6 +0,0 @@
-.overlay {
-  background-color: yellow;
-  border-radius: 6px;
-  padding: 4px;
-  white-space: nowrap;
-}

examples/export-map.html

@@ -3,13 +3,9 @@ layout: example.html
 title: Map Export
 shortdesc: Example of exporting a map as a PNG image.
 docs: >
-  Example of exporting a map as a PNG image. This example use the <a href="https://www.npmjs.com/package/html-to-image">html-to-image</a>
+  Example of exporting a map as a PNG image.
-  library.
 tags: "export, png, openstreetmap"
 ---
 <div id="map" class="map"></div>
-<div style="display: none;">
-  <div class="overlay" id="null">Null Island</div>
-</div>
 <a id="export-png" class="btn btn-default"><i class="fa fa-download"></i> Download PNG</a>
 <a id="image-download" download="map.png"></a>

examples/export-map.js

@@ -1,12 +1,9 @@
 import Map from '../src/ol/Map.js';
 import View from '../src/ol/View.js';
-import Overlay from '../src/ol/Overlay.js';
 import GeoJSON from '../src/ol/format/GeoJSON.js';
 import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js';
 import {OSM, Vector as VectorSource} from '../src/ol/source.js';
 
-import {toPng} from 'html-to-image';
-
 const map = new Map({
   layers: [
     new TileLayer({
@@ -16,7 +13,8 @@ const map = new Map({
       source: new VectorSource({
         url: 'data/geojson/countries.geojson',
         format: new GeoJSON()
-      })
+      }),
+      opacity: 0.5
     })
   ],
   target: 'map',
@@ -26,28 +24,33 @@ const map = new Map({
   })
 });
 
-map.addOverlay(new Overlay({
-  position: [0, 0],
-  element: document.getElementById('null')
-}));
-
-
-// export options for html-to-image.
-// See: https://github.com/bubkoo/html-to-image#options
-const exportOptions = {
-  filter: function(element) {
-    return element.className ? element.className.indexOf('ol-control') === -1 : true;
-  }
-};
-
 document.getElementById('export-png').addEventListener('click', function() {
   map.once('rendercomplete', function() {
-    toPng(map.getTargetElement(), exportOptions)
+    const mapCanvas = document.createElement('canvas');
-      .then(function(dataURL) {
+    const size = map.getSize();
-        const link = document.getElementById('image-download');
+    mapCanvas.width = size[0];
-        link.href = dataURL;
+    mapCanvas.height = size[1];
-        link.click();
+    const mapContext = mapCanvas.getContext('2d');
+    Array.prototype.forEach.call(document.querySelectorAll('.ol-layer canvas'), function(canvas) {
+      if (canvas.width > 0) {
+        const opacity = canvas.parentNode.style.opacity;
+        mapContext.globalAlpha = opacity === '' ? 1 : Number(opacity);
+        const transform = canvas.style.transform;
+        // Get the transform parameters from the style's transform matrix
+        const matrix = transform.match(/^matrix\(([^\(]*)\)$/)[1].split(',').map(Number);
+        // Apply the transform to the export map context
+        CanvasRenderingContext2D.prototype.setTransform.apply(mapContext, matrix);
+        mapContext.drawImage(canvas, 0, 0);
+      }
     });
+    if (navigator.msSaveBlob) {
+      // link download attribuute does not work on MS browsers
+      navigator.msSaveBlob(mapCanvas.msToBlob(), 'map.png');
+    } else {
+      const link = document.getElementById('image-download');
+      link.href = mapCanvas.toDataURL();
+      link.click();
+    }
   });
   map.renderSync();
 });

package-lock.json

@@ -7069,12 +7069,6 @@
       "integrity": "sha1-DfKTUfByEWNRXfueVUPl9u7VFi8=",
       "dev": true
     },
-    "html-to-image": {
-      "version": "0.1.1",
-      "resolved": "https://registry.npmjs.org/html-to-image/-/html-to-image-0.1.1.tgz",
-      "integrity": "sha512-UAjpXmokENeOyzfLwL0+zQ502lXyg6pkzVUmRjtljOH9dR/YdEYQhWrQ/O14hmH5/1L7jv1aOupU4Zi3Y8+iow==",
-      "dev": true
-    },
     "http-deceiver": {
       "version": "1.2.7",
       "resolved": "https://registry.npmjs.org/http-deceiver/-/http-deceiver-1.2.7.tgz",

package.json

@@ -64,7 +64,6 @@
     "glob": "^7.1.5",
     "globby": "^11.0.0",
     "handlebars": "4.7.3",
-    "html-to-image": "^0.1.0",
     "istanbul": "0.4.5",
     "istanbul-instrumenter-loader": "^3.0.1",
     "jquery": "3.4.1",