remove overlay and html-to-image

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)
-      .then(function(dataURL) {
-        const link = document.getElementById('image-download');
-        link.href = dataURL;
-        link.click();
-      });
+    const mapCanvas = document.createElement('canvas');
+    const size = map.getSize();
+    mapCanvas.width = size[0];
+    mapCanvas.height = size[1];
+    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();
 });