Use html2canvas instead of dom-to-image

examples/.eslintrc

@@ -5,11 +5,11 @@
     "common": false,
     "createMapboxStreetsV6Style": false,
     "d3": false,
-    "domtoimage": false,
+    "html2canvas": false,
     "geojsonvt": false,
     "gifler": false,
     "GyroNorm": false,
-    "jsPDF": false,
+    "jspdf": false,
     "jsts": false,
     "JSZip": false,
     "mapboxgl": false,

examples/export-pdf.html

@@ -6,7 +6,7 @@ docs: >
   Example of exporting a map as a PDF using the <a href="https://github.com/MrRio/jsPDF" target="_blank">jsPDF</a> library.
 tags: "export, pdf, openstreetmap"
 resources:
-  - https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.min.js
+  - https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.3.1/jspdf.umd.min.js
 ---
 <div class="row-fluid">
   <div class="span12">

examples/export-pdf.js

@@ -83,7 +83,7 @@ exportButton.addEventListener(
           }
         }
       );
-      const pdf = new jsPDF('landscape', undefined, format);
+      const pdf = new jspdf.jsPDF('landscape', undefined, format);
       pdf.addImage(
         mapCanvas.toDataURL('image/jpeg'),
         'JPEG',

examples/print-to-scale.html

@@ -7,12 +7,11 @@ docs: >
   The print is exported as a PDF using the <a href="https://github.com/MrRio/jsPDF" target="_blank">jsPDF</a> library.
   Unlike the <a href="export-pdf.html">Export PDF example</a> the on screen map is only used to set the center and rotation.
   The extent printed depends on the scale and page size. To print the scale bar and attributions the example uses the
-  <a href="https://github.com/1904labs/dom-to-image-more" target="_blank">dom-to-image-more</a> library. Due to browser
-  limitations and restrictions <b>Internet Explorer and Safari are not supported</b>.
+  <a href="https://html2canvas.hertzen.com/" target="_blank">html2canvas</a> library.
 tags: "print, printing, scale, scaleline, export, pdf"
 resources:
-  - https://unpkg.com/dom-to-image-more@2.8.0/dist/dom-to-image-more.min.js
-  - https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.min.js
+  - https://html2canvas.hertzen.com/dist/html2canvas.min.js
+  - https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.3.1/jspdf.umd.min.js
 ---
 <div class="wrapper">
   <div id="map" class="map"></div>

examples/print-to-scale.js

@@ -68,12 +68,13 @@ const dims = {
   a5: [210, 148],
 };
 
-// export options for html-to-image.
-// See: https://github.com/bubkoo/html-to-image#options
+// export options for html2canvase.
+// See: https://html2canvas.hertzen.com/configuration
 const exportOptions = {
-  filter: function (element) {
+  useCORS: true,
+  ignoreElements: function (element) {
     const className = element.className || '';
-    return (
+    return !(
       className.indexOf('ol-control') === -1 ||
       className.indexOf('ol-scale') > -1 ||
       (className.indexOf('ol-attribution') > -1 &&
@@ -108,21 +109,26 @@ exportButton.addEventListener(
     map.once('rendercomplete', function () {
       exportOptions.width = width;
       exportOptions.height = height;
-      domtoimage
-        .toJpeg(map.getViewport(), exportOptions)
-        .then(function (dataUrl) {
-          const pdf = new jsPDF('landscape', undefined, format);
-          pdf.addImage(dataUrl, 'JPEG', 0, 0, dim[0], dim[1]);
-          pdf.save('map.pdf');
-          // Reset original map size
-          scaleLine.setDpi();
-          map.getTargetElement().style.width = '';
-          map.getTargetElement().style.height = '';
-          map.updateSize();
-          map.getView().setResolution(viewResolution);
-          exportButton.disabled = false;
-          document.body.style.cursor = 'auto';
-        });
+      html2canvas(map.getViewport(), exportOptions).then(function (canvas) {
+        const pdf = new jspdf.jsPDF('landscape', undefined, format);
+        pdf.addImage(
+          canvas.toDataURL('image/jpeg'),
+          'JPEG',
+          0,
+          0,
+          dim[0],
+          dim[1]
+        );
+        pdf.save('map.pdf');
+        // Reset original map size
+        scaleLine.setDpi();
+        map.getTargetElement().style.width = '';
+        map.getTargetElement().style.height = '';
+        map.updateSize();
+        map.getView().setResolution(viewResolution);
+        exportButton.disabled = false;
+        document.body.style.cursor = 'auto';
+      });
     });
 
     // Set print size