diff --git a/examples/.eslintrc b/examples/.eslintrc index 38df3c6baa..b00313d641 100644 --- a/examples/.eslintrc +++ b/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, diff --git a/examples/export-pdf.html b/examples/export-pdf.html index 00f92fa728..6911cdf544 100644 --- a/examples/export-pdf.html +++ b/examples/export-pdf.html @@ -6,7 +6,7 @@ docs: > Example of exporting a map as a PDF using the jsPDF 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 ---
diff --git a/examples/export-pdf.js b/examples/export-pdf.js index 3d1bb4fcc0..000d581653 100644 --- a/examples/export-pdf.js +++ b/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', diff --git a/examples/print-to-scale.html b/examples/print-to-scale.html index 00875383f3..ccbcc587fa 100644 --- a/examples/print-to-scale.html +++ b/examples/print-to-scale.html @@ -7,12 +7,11 @@ docs: > The print is exported as a PDF using the jsPDF library. Unlike the Export PDF example 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 - dom-to-image-more library. Due to browser - limitations and restrictions Internet Explorer and Safari are not supported. + html2canvas 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 ---
diff --git a/examples/print-to-scale.js b/examples/print-to-scale.js index 75f702ec99..e2267401d9 100644 --- a/examples/print-to-scale.js +++ b/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