From 2ac1095c526dcf0e3bbdcd18c6110bb051d78e50 Mon Sep 17 00:00:00 2001 From: Frederic Junod Date: Tue, 23 Apr 2019 09:58:29 +0200 Subject: [PATCH 1/3] Use html-to-image instead of dom-to-image-more dom-to-image-more do not support safari --- examples/.eslintrc | 1 - examples/export-map.html | 4 +--- examples/export-map.js | 4 +++- examples/export-pdf.html | 1 - examples/export-pdf.js | 4 +++- package.json | 1 + 6 files changed, 8 insertions(+), 7 deletions(-) diff --git a/examples/.eslintrc b/examples/.eslintrc index c404b2e6e6..769357d35a 100644 --- a/examples/.eslintrc +++ b/examples/.eslintrc @@ -5,7 +5,6 @@ "common": false, "createMapboxStreetsV6Style": false, "d3": false, - "domtoimage": false, "geojsonvt": false, "GyroNorm": false, "jsPDF": false, diff --git a/examples/export-map.html b/examples/export-map.html index bc8f1994ac..4ab8686cbb 100644 --- a/examples/export-map.html +++ b/examples/export-map.html @@ -3,11 +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 dom-to-image-more + Example of exporting a map as a PNG image. This example use the html-to-image library. tags: "export, png, openstreetmap" -resources: - - https://unpkg.com/dom-to-image-more@2.7.1/dist/dom-to-image-more.min.js ---
Download PNG diff --git a/examples/export-map.js b/examples/export-map.js index e57598c26a..0dba7f3ac7 100644 --- a/examples/export-map.js +++ b/examples/export-map.js @@ -4,6 +4,8 @@ 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({ @@ -25,7 +27,7 @@ const map = new Map({ document.getElementById('export-png').addEventListener('click', function() { map.once('rendercomplete', function() { - domtoimage.toPng(map.getViewport().querySelector('.ol-layers')) + toPng(map.getViewport().querySelector('.ol-layers')) .then(function(dataURL) { const link = document.getElementById('image-download'); link.href = dataURL; diff --git a/examples/export-pdf.html b/examples/export-pdf.html index 00269ff4dc..c335d609a1 100644 --- a/examples/export-pdf.html +++ b/examples/export-pdf.html @@ -7,7 +7,6 @@ docs: > tags: "export, pdf, openstreetmap" resources: - https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.2.61/jspdf.min.js - - https://unpkg.com/dom-to-image-more@2.7.1/dist/dom-to-image-more.min.js ---
diff --git a/examples/export-pdf.js b/examples/export-pdf.js index 1454339e6b..c99c7419ef 100644 --- a/examples/export-pdf.js +++ b/examples/export-pdf.js @@ -4,6 +4,8 @@ import WKT from '../src/ol/format/WKT.js'; import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js'; import {OSM, Vector as VectorSource} from '../src/ol/source.js'; +import {toJpeg} from 'html-to-image'; + const raster = new TileLayer({ source: new OSM() }); @@ -57,7 +59,7 @@ exportButton.addEventListener('click', function() { const extent = map.getView().calculateExtent(size); map.once('rendercomplete', function() { - domtoimage.toJpeg(map.getViewport().querySelector('.ol-layers')).then(function(dataUrl) { + toJpeg(map.getViewport().querySelector('.ol-layers')).then(function(dataUrl) { const pdf = new jsPDF('landscape', undefined, format); pdf.addImage(dataUrl, 'JPEG', 0, 0, dim[0], dim[1]); pdf.save('map.pdf'); diff --git a/package.json b/package.json index 589f420136..9fd1627c64 100644 --- a/package.json +++ b/package.json @@ -61,6 +61,7 @@ "glob": "^7.1.2", "globby": "^9.2.0", "handlebars": "4.1.2", + "html-to-image": "^0.1.0", "istanbul": "0.4.5", "jquery": "3.4.0", "jsdoc": "3.5.5", From 93c25d4f8258565dde18216d8372aae8c890d653 Mon Sep 17 00:00:00 2001 From: Frederic Junod Date: Tue, 23 Apr 2019 10:17:14 +0200 Subject: [PATCH 2/3] Export the map viewport instead of the layers And filter out the controls elements --- examples/export-map.js | 10 +++++++++- examples/export-pdf.js | 11 ++++++++++- 2 files changed, 19 insertions(+), 2 deletions(-) diff --git a/examples/export-map.js b/examples/export-map.js index 0dba7f3ac7..f402a0fa86 100644 --- a/examples/export-map.js +++ b/examples/export-map.js @@ -25,9 +25,17 @@ const map = new Map({ }) }); +// export options for html-to-image. +// See: https://github.com/bubkoo/html-to-image#options +const exportOptions = { + filter: function(element) { + return element.className.indexOf('ol-control') === -1; + } +}; + document.getElementById('export-png').addEventListener('click', function() { map.once('rendercomplete', function() { - toPng(map.getViewport().querySelector('.ol-layers')) + toPng(map.getTargetElement(), exportOptions) .then(function(dataURL) { const link = document.getElementById('image-download'); link.href = dataURL; diff --git a/examples/export-pdf.js b/examples/export-pdf.js index c99c7419ef..5d9bce45fd 100644 --- a/examples/export-pdf.js +++ b/examples/export-pdf.js @@ -43,6 +43,15 @@ const dims = { a5: [210, 148] }; + +// export options for html-to-image. +// See: https://github.com/bubkoo/html-to-image#options +const exportOptions = { + filter: function(element) { + return element.className.indexOf('ol-control') === -1; + } +}; + const exportButton = document.getElementById('export-pdf'); exportButton.addEventListener('click', function() { @@ -59,7 +68,7 @@ exportButton.addEventListener('click', function() { const extent = map.getView().calculateExtent(size); map.once('rendercomplete', function() { - toJpeg(map.getViewport().querySelector('.ol-layers')).then(function(dataUrl) { + toJpeg(map.getTargetElement(), 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'); From 2f6f110fa326051d7ae468d39c1ae169532d8a9c Mon Sep 17 00:00:00 2001 From: Frederic Junod Date: Tue, 23 Apr 2019 10:19:21 +0200 Subject: [PATCH 3/3] Remove constrainResolution property in fit options --- examples/export-pdf.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/examples/export-pdf.js b/examples/export-pdf.js index 5d9bce45fd..c1e8c256a2 100644 --- a/examples/export-pdf.js +++ b/examples/export-pdf.js @@ -75,8 +75,7 @@ exportButton.addEventListener('click', function() { // Reset original map size map.setSize(size); map.getView().fit(extent, { - size: size, - constrainResolution: false + size: size }); exportButton.disabled = false; document.body.style.cursor = 'auto';