From ffae237f859cf63a1daf7abdeb2733df57697093 Mon Sep 17 00:00:00 2001 From: Paul Weidner Date: Fri, 12 Jul 2024 12:59:03 -0700 Subject: [PATCH 1/9] Add image control and behavior --- .../simple-html-consumer/static/index.html | 1 + src/behavior/image.js | 10 ++ src/behavior/index.js | 1 + src/control/Image/Image.css | 16 +++ src/control/Image/Image.js | 121 ++++++++++++++++++ 5 files changed, 149 insertions(+) create mode 100644 src/behavior/image.js create mode 100644 src/control/Image/Image.css create mode 100644 src/control/Image/Image.js diff --git a/examples/simple-html-consumer/static/index.html b/examples/simple-html-consumer/static/index.html index 5a1514d..4277925 100644 --- a/examples/simple-html-consumer/static/index.html +++ b/examples/simple-html-consumer/static/index.html @@ -28,6 +28,7 @@ units: 'metric', } var myMap = farmOS.map.create("map", options); + myMap.addBehavior("image"); myMap.addBehavior("edit").then(() => { myMap.addBehavior("measure", { layer: myMap.edit.layer }); myMap.edit.wktOn("featurechange", console.log); diff --git a/src/behavior/image.js b/src/behavior/image.js new file mode 100644 index 0000000..8332521 --- /dev/null +++ b/src/behavior/image.js @@ -0,0 +1,10 @@ +import Image from '../control/Image/Image'; + +export default { + attach(instance) { + + // Create the Image control and add it to the map. + const control = new Image(); + instance.map.addControl(control); + }, +}; diff --git a/src/behavior/index.js b/src/behavior/index.js index f4dd22f..00e943b 100644 --- a/src/behavior/index.js +++ b/src/behavior/index.js @@ -11,6 +11,7 @@ function lazyLoadedBehavior(name) { export default { edit: lazyLoadedBehavior('edit'), + image: lazyLoadedBehavior('image'), layerSwitcherInSidePanel: lazyLoadedBehavior('layerSwitcherInSidePanel'), loading: lazyLoadedBehavior('loading'), measure: lazyLoadedBehavior('measure'), diff --git a/src/control/Image/Image.css b/src/control/Image/Image.css new file mode 100644 index 0000000..f751168 --- /dev/null +++ b/src/control/Image/Image.css @@ -0,0 +1,16 @@ +.ol-image.ol-control { + top: 0.5em; + right: 6.5em; +} + +.ol-image.ol-control .download { + display: none; +} + +.ol-image.ol-control.active .download { + display: block; +} + +.ol-image.ol-control button { + display: inline-block; +} diff --git a/src/control/Image/Image.js b/src/control/Image/Image.js new file mode 100644 index 0000000..3c43a82 --- /dev/null +++ b/src/control/Image/Image.js @@ -0,0 +1,121 @@ +import Control from 'ol/control/Control'; +import { CLASS_CONTROL, CLASS_UNSELECTABLE } from 'ol/css'; +import EventType from 'ol/events/EventType'; +import './Image.css'; + +/** + * @classdesc + * OpenLayers Image Control. + * + * @api + */ +class Image extends Control { + + /** + * @param {Options=} opts Image options. + */ + constructor(opts) { + const options = opts || {}; + + // Call the parent control constructor. + super({ + element: document.createElement('div'), + target: options.target, + }); + + // Create the image button element. + const className = options.className || 'ol-image'; + const button = document.createElement('button'); + button.innerHTML = options.label || ''; + button.title = options.tooltip || 'Capture image'; + button.className = className; + button.type = 'button'; + + // Register a click event on the button. + button.addEventListener(EventType.CLICK, this.captureImage.bind(this), false); + + // Add the button and CSS classes to the control element. + const { element } = this; + element.className = `${className} ${CLASS_UNSELECTABLE} ${CLASS_CONTROL}`; + element.appendChild(button); + + // Create a download button with link. + const link = document.createElement('a'); + link.setAttribute('download', ''); + link.innerHTML = ''; + this.link = link; + const download = document.createElement('button'); + download.title = 'Download image'; + download.className = 'download'; + download.appendChild(link); + element.appendChild(download); + } + + /** + * Callback to deactivate the image control. + * @private + */ + deactivate() { + this.element.classList.remove('active'); + } + + /** + * Callback for the image button click event. + * @param {MouseEvent} event The event to handle + * @private + */ + captureImage(event) { + event.preventDefault(); + + // Create a new canvas element to combine multiple map canvas data to. + const mapCanvas = document.createElement('canvas'); + const [width, height] = this.getMap().getSize(); + mapCanvas.width = width; + mapCanvas.height = height; + const mapContext = mapCanvas.getContext('2d'); + + // Draw each canvas from this map into the new canvas. + Array.prototype.forEach.call( + this.getMap().getTargetElement().querySelectorAll('.ol-layer canvas'), + (canvas) => { + if (canvas.width > 0) { + const { opacity } = canvas.parentNode.style; + mapContext.globalAlpha = opacity === '' ? 1 : Number(opacity); + + // Get the transform parameters from the style's transform matrix. + // This is necessary so that vectors align with raster layers. + const { transform } = canvas.style; + 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); + } + }, + ); + + // Build a jpeg data url and update link. + const url = mapCanvas.toDataURL('image/jpeg'); + this.link.href = url; + + // Toggle the image actions. + this.element.classList.add('active'); + + // Subscribe to events to deactivate image actions. + this.getMap().on(EventType.CLICK, this.deactivate.bind(this)); + this.getMap().on(EventType.CHANGE, this.deactivate.bind(this)); + this.getMap().on(EventType.MOVESTART, this.deactivate.bind(this)); + + // The move start event seems to only work with a string. + this.getMap().on('movestart', this.deactivate.bind(this)); + } + +} + +export default Image; From 2cfba21fd20a1156811da1be61beb564e920f190 Mon Sep 17 00:00:00 2001 From: Paul Weidner Date: Fri, 12 Jul 2024 13:26:21 -0700 Subject: [PATCH 2/9] Add button to print map --- package-lock.json | 14 +++++++++++++- package.json | 3 ++- src/control/Image/Image.css | 6 ++++-- src/control/Image/Image.js | 19 +++++++++++++++++++ 4 files changed, 38 insertions(+), 4 deletions(-) diff --git a/package-lock.json b/package-lock.json index 441edbd..008e1c0 100644 --- a/package-lock.json +++ b/package-lock.json @@ -15,7 +15,8 @@ "ol-grid": "^1.1.7", "ol-layerswitcher": "^3.7.0", "ol-popup": "^4.0.0", - "ol-side-panel": "^1.0.6" + "ol-side-panel": "^1.0.6", + "print-js": "^1.6.0" }, "devDependencies": { "copy-webpack-plugin": "^8.1.1", @@ -6647,6 +6648,12 @@ "node": ">= 0.8.0" } }, + "node_modules/print-js": { + "version": "1.6.0", + "resolved": "https://registry.npmjs.org/print-js/-/print-js-1.6.0.tgz", + "integrity": "sha512-BfnOIzSKbqGRtO4o0rnj/K3681BSd2QUrsIZy/+WdCIugjIswjmx3lDEZpXB2ruGf9d4b3YNINri81+J0FsBWg==", + "license": "MIT" + }, "node_modules/process-nextick-args": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz", @@ -14479,6 +14486,11 @@ "integrity": "sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==", "dev": true }, + "print-js": { + "version": "1.6.0", + "resolved": "https://registry.npmjs.org/print-js/-/print-js-1.6.0.tgz", + "integrity": "sha512-BfnOIzSKbqGRtO4o0rnj/K3681BSd2QUrsIZy/+WdCIugjIswjmx3lDEZpXB2ruGf9d4b3YNINri81+J0FsBWg==" + }, "process-nextick-args": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz", diff --git a/package.json b/package.json index 597c5c6..9d365bd 100644 --- a/package.json +++ b/package.json @@ -37,6 +37,7 @@ "ol-grid": "^1.1.7", "ol-layerswitcher": "^3.7.0", "ol-popup": "^4.0.0", - "ol-side-panel": "^1.0.6" + "ol-side-panel": "^1.0.6", + "print-js": "^1.6.0" } } diff --git a/src/control/Image/Image.css b/src/control/Image/Image.css index f751168..453d50a 100644 --- a/src/control/Image/Image.css +++ b/src/control/Image/Image.css @@ -3,11 +3,13 @@ right: 6.5em; } -.ol-image.ol-control .download { +.ol-image.ol-control .download, +.ol-image.ol-control .print { display: none; } -.ol-image.ol-control.active .download { +.ol-image.ol-control.active .download, +.ol-image.ol-control.active .print { display: block; } diff --git a/src/control/Image/Image.js b/src/control/Image/Image.js index 3c43a82..47cb071 100644 --- a/src/control/Image/Image.js +++ b/src/control/Image/Image.js @@ -2,6 +2,7 @@ import Control from 'ol/control/Control'; import { CLASS_CONTROL, CLASS_UNSELECTABLE } from 'ol/css'; import EventType from 'ol/events/EventType'; import './Image.css'; +import printJS from 'print-js'; /** * @classdesc @@ -49,6 +50,14 @@ class Image extends Control { download.className = 'download'; download.appendChild(link); element.appendChild(download); + + // Create a print button. + const print = document.createElement('button'); + print.innerHTML = ''; + print.title = 'Print image'; + print.className = 'print'; + print.addEventListener('click', this.printImage.bind(this)); + element.appendChild(print); } /** @@ -116,6 +125,16 @@ class Image extends Control { this.getMap().on('movestart', this.deactivate.bind(this)); } + /** + * Callback for the image button click event. + * @private + */ + printImage() { + if (this.link.href.length) { + printJS(this.link.href, 'image'); + } + } + } export default Image; From 87f1c136efbb6764cf0a231ed30c43807cef44c6 Mon Sep 17 00:00:00 2001 From: Paul Weidner Date: Fri, 12 Jul 2024 13:33:51 -0700 Subject: [PATCH 3/9] Add changelog --- CHANGELOG.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 13063f1..4922a82 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -6,6 +6,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ## [Unreleased] +### Added + +- Add image control to download and print map. #202 + ## [v2.2.2] - 2023-09-02 ### Fixed From fc4f2fc861e57b2f81283c476724314cab4d5df3 Mon Sep 17 00:00:00 2001 From: Paul Weidner Date: Fri, 12 Jul 2024 13:40:23 -0700 Subject: [PATCH 4/9] Remove the canvas element after generating data url --- src/control/Image/Image.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/control/Image/Image.js b/src/control/Image/Image.js index 47cb071..a655261 100644 --- a/src/control/Image/Image.js +++ b/src/control/Image/Image.js @@ -113,6 +113,9 @@ class Image extends Control { const url = mapCanvas.toDataURL('image/jpeg'); this.link.href = url; + // Remove the new canvas. + mapCanvas.remove(); + // Toggle the image actions. this.element.classList.add('active'); From c5ba759e6cb092d32f0ac7e6d550e7534b453f24 Mon Sep 17 00:00:00 2001 From: Paul Weidner Date: Fri, 12 Jul 2024 13:40:35 -0700 Subject: [PATCH 5/9] Set image download title to document title --- src/control/Image/Image.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/control/Image/Image.js b/src/control/Image/Image.js index a655261..1969739 100644 --- a/src/control/Image/Image.js +++ b/src/control/Image/Image.js @@ -42,7 +42,7 @@ class Image extends Control { // Create a download button with link. const link = document.createElement('a'); - link.setAttribute('download', ''); + link.setAttribute('download', document.title); link.innerHTML = ''; this.link = link; const download = document.createElement('button'); From 47ef5ca5d88a5d6a3dd12e9173565869e0d59b98 Mon Sep 17 00:00:00 2001 From: Paul Weidner Date: Thu, 18 Jul 2024 08:25:49 -0700 Subject: [PATCH 6/9] Rename behavior and control to snapshot --- CHANGELOG.md | 2 +- .../simple-html-consumer/static/index.html | 2 +- src/behavior/image.js | 10 ------ src/behavior/index.js | 2 +- src/behavior/snapshot.js | 10 ++++++ src/control/Image/Image.css | 18 ---------- src/control/Snapshot/Snapshot.css | 18 ++++++++++ .../{Image/Image.js => Snapshot/Snapshot.js} | 34 +++++++++---------- 8 files changed, 48 insertions(+), 48 deletions(-) delete mode 100644 src/behavior/image.js create mode 100644 src/behavior/snapshot.js delete mode 100644 src/control/Image/Image.css create mode 100644 src/control/Snapshot/Snapshot.css rename src/control/{Image/Image.js => Snapshot/Snapshot.js} (92%) diff --git a/CHANGELOG.md b/CHANGELOG.md index 4922a82..44d26da 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -8,7 +8,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ### Added -- Add image control to download and print map. #202 +- Add snapshot control to download and print map. #202 ## [v2.2.2] - 2023-09-02 diff --git a/examples/simple-html-consumer/static/index.html b/examples/simple-html-consumer/static/index.html index 4277925..db5c766 100644 --- a/examples/simple-html-consumer/static/index.html +++ b/examples/simple-html-consumer/static/index.html @@ -28,7 +28,6 @@ units: 'metric', } var myMap = farmOS.map.create("map", options); - myMap.addBehavior("image"); myMap.addBehavior("edit").then(() => { myMap.addBehavior("measure", { layer: myMap.edit.layer }); myMap.edit.wktOn("featurechange", console.log); @@ -37,6 +36,7 @@ myMap.addBehavior("sidePanel"); myMap.addBehavior("layerSwitcherInSidePanel"); myMap.addBehavior("snappingGrid"); + myMap.addBehavior("snapshot"); // Display popup with coordinates when not clicking a feature. myMap.addPopup(function (event) { diff --git a/src/behavior/image.js b/src/behavior/image.js deleted file mode 100644 index 8332521..0000000 --- a/src/behavior/image.js +++ /dev/null @@ -1,10 +0,0 @@ -import Image from '../control/Image/Image'; - -export default { - attach(instance) { - - // Create the Image control and add it to the map. - const control = new Image(); - instance.map.addControl(control); - }, -}; diff --git a/src/behavior/index.js b/src/behavior/index.js index 00e943b..0d82059 100644 --- a/src/behavior/index.js +++ b/src/behavior/index.js @@ -11,11 +11,11 @@ function lazyLoadedBehavior(name) { export default { edit: lazyLoadedBehavior('edit'), - image: lazyLoadedBehavior('image'), layerSwitcherInSidePanel: lazyLoadedBehavior('layerSwitcherInSidePanel'), loading: lazyLoadedBehavior('loading'), measure: lazyLoadedBehavior('measure'), rememberLayer: lazyLoadedBehavior('rememberLayer'), sidePanel: lazyLoadedBehavior('sidePanel'), snappingGrid: lazyLoadedBehavior('snappingGrid'), + snapshot: lazyLoadedBehavior('snapshot'), }; diff --git a/src/behavior/snapshot.js b/src/behavior/snapshot.js new file mode 100644 index 0000000..519714f --- /dev/null +++ b/src/behavior/snapshot.js @@ -0,0 +1,10 @@ +import Snapshot from '../control/Snapshot/Snapshot'; + +export default { + attach(instance) { + + // Create the Snapshot control and add it to the map. + const control = new Snapshot(); + instance.map.addControl(control); + }, +}; diff --git a/src/control/Image/Image.css b/src/control/Image/Image.css deleted file mode 100644 index 453d50a..0000000 --- a/src/control/Image/Image.css +++ /dev/null @@ -1,18 +0,0 @@ -.ol-image.ol-control { - top: 0.5em; - right: 6.5em; -} - -.ol-image.ol-control .download, -.ol-image.ol-control .print { - display: none; -} - -.ol-image.ol-control.active .download, -.ol-image.ol-control.active .print { - display: block; -} - -.ol-image.ol-control button { - display: inline-block; -} diff --git a/src/control/Snapshot/Snapshot.css b/src/control/Snapshot/Snapshot.css new file mode 100644 index 0000000..92e7f0f --- /dev/null +++ b/src/control/Snapshot/Snapshot.css @@ -0,0 +1,18 @@ +.ol-snapshot.ol-control { + top: 0.5em; + right: 6.5em; +} + +.ol-snapshot.ol-control .download, +.ol-snapshot.ol-control .print { + display: none; +} + +.ol-snapshot.ol-control.active .download, +.ol-snapshot.ol-control.active .print { + display: block; +} + +.ol-snapshot.ol-control button { + display: inline-block; +} diff --git a/src/control/Image/Image.js b/src/control/Snapshot/Snapshot.js similarity index 92% rename from src/control/Image/Image.js rename to src/control/Snapshot/Snapshot.js index 1969739..5cd495c 100644 --- a/src/control/Image/Image.js +++ b/src/control/Snapshot/Snapshot.js @@ -1,19 +1,19 @@ import Control from 'ol/control/Control'; import { CLASS_CONTROL, CLASS_UNSELECTABLE } from 'ol/css'; import EventType from 'ol/events/EventType'; -import './Image.css'; +import './Snapshot.css'; import printJS from 'print-js'; /** * @classdesc - * OpenLayers Image Control. + * OpenLayers Snapshot Control. * * @api */ -class Image extends Control { +class Snapshot extends Control { /** - * @param {Options=} opts Image options. + * @param {Options=} opts Snapshot options. */ constructor(opts) { const options = opts || {}; @@ -24,11 +24,11 @@ class Image extends Control { target: options.target, }); - // Create the image button element. - const className = options.className || 'ol-image'; + // Create the snapshot button element. + const className = options.className || 'ol-snapshot'; const button = document.createElement('button'); button.innerHTML = options.label || ''; - button.title = options.tooltip || 'Capture image'; + button.title = options.tooltip || 'Snapshot'; button.className = className; button.type = 'button'; @@ -46,7 +46,7 @@ class Image extends Control { link.innerHTML = ''; this.link = link; const download = document.createElement('button'); - download.title = 'Download image'; + download.title = 'Download snapshot'; download.className = 'download'; download.appendChild(link); element.appendChild(download); @@ -54,14 +54,14 @@ class Image extends Control { // Create a print button. const print = document.createElement('button'); print.innerHTML = ''; - print.title = 'Print image'; + print.title = 'Print snapshot'; print.className = 'print'; - print.addEventListener('click', this.printImage.bind(this)); + print.addEventListener('click', this.printSnapshot.bind(this)); element.appendChild(print); } /** - * Callback to deactivate the image control. + * Callback to deactivate the snapshot control. * @private */ deactivate() { @@ -69,7 +69,7 @@ class Image extends Control { } /** - * Callback for the image button click event. + * Callback for the snapshot button click event. * @param {MouseEvent} event The event to handle * @private */ @@ -116,10 +116,10 @@ class Image extends Control { // Remove the new canvas. mapCanvas.remove(); - // Toggle the image actions. + // Enable the snapshot actions. this.element.classList.add('active'); - // Subscribe to events to deactivate image actions. + // Subscribe to events to deactivate snapshot actions. this.getMap().on(EventType.CLICK, this.deactivate.bind(this)); this.getMap().on(EventType.CHANGE, this.deactivate.bind(this)); this.getMap().on(EventType.MOVESTART, this.deactivate.bind(this)); @@ -129,10 +129,10 @@ class Image extends Control { } /** - * Callback for the image button click event. + * Callback for the snapshot button click event. * @private */ - printImage() { + printSnapshot() { if (this.link.href.length) { printJS(this.link.href, 'image'); } @@ -140,4 +140,4 @@ class Image extends Control { } -export default Image; +export default Snapshot; From 77f575ad4d7d076c755baeb005fee4c2ad88d1c1 Mon Sep 17 00:00:00 2001 From: Paul Weidner Date: Thu, 18 Jul 2024 08:45:57 -0700 Subject: [PATCH 7/9] Fix movestart event --- src/control/Snapshot/Snapshot.js | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/src/control/Snapshot/Snapshot.js b/src/control/Snapshot/Snapshot.js index 5cd495c..0692425 100644 --- a/src/control/Snapshot/Snapshot.js +++ b/src/control/Snapshot/Snapshot.js @@ -1,6 +1,7 @@ import Control from 'ol/control/Control'; import { CLASS_CONTROL, CLASS_UNSELECTABLE } from 'ol/css'; import EventType from 'ol/events/EventType'; +import MapEventType from 'ol/MapEventType'; import './Snapshot.css'; import printJS from 'print-js'; @@ -122,10 +123,7 @@ class Snapshot extends Control { // Subscribe to events to deactivate snapshot actions. this.getMap().on(EventType.CLICK, this.deactivate.bind(this)); this.getMap().on(EventType.CHANGE, this.deactivate.bind(this)); - this.getMap().on(EventType.MOVESTART, this.deactivate.bind(this)); - - // The move start event seems to only work with a string. - this.getMap().on('movestart', this.deactivate.bind(this)); + this.getMap().on(MapEventType.MOVESTART, this.deactivate.bind(this)); } /** From 6b71469a2030f4c7d85037240ac9d7d181f0ab43 Mon Sep 17 00:00:00 2001 From: Paul Weidner Date: Thu, 18 Jul 2024 10:12:10 -0700 Subject: [PATCH 8/9] Make canvas transformation and drawing more declarative --- src/control/Snapshot/Snapshot.js | 47 ++++++++++++++++---------------- 1 file changed, 23 insertions(+), 24 deletions(-) diff --git a/src/control/Snapshot/Snapshot.js b/src/control/Snapshot/Snapshot.js index 0692425..9eb99a3 100644 --- a/src/control/Snapshot/Snapshot.js +++ b/src/control/Snapshot/Snapshot.js @@ -85,30 +85,29 @@ class Snapshot extends Control { const mapContext = mapCanvas.getContext('2d'); // Draw each canvas from this map into the new canvas. - Array.prototype.forEach.call( - this.getMap().getTargetElement().querySelectorAll('.ol-layer canvas'), - (canvas) => { - if (canvas.width > 0) { - const { opacity } = canvas.parentNode.style; - mapContext.globalAlpha = opacity === '' ? 1 : Number(opacity); - - // Get the transform parameters from the style's transform matrix. - // This is necessary so that vectors align with raster layers. - const { transform } = canvas.style; - 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); - } - }, - ); + // Logic for transforming and drawing canvases derived from ol export-pdf example. + // https://github.com/openlayers/openlayers/blob/6f2ca3b9635f273f6fbddab834bd9126c7d48964/examples/export-pdf.js#L61-L85 + Array.from(this.getMap().getTargetElement().querySelectorAll('.ol-layer canvas')) + .filter(canvas => canvas.width > 0) + .forEach((canvas) => { + const { opacity } = canvas.parentNode.style; + mapContext.globalAlpha = opacity === '' ? 1 : Number(opacity); + + // Get the transform parameters from the style's transform matrix. + // This is necessary so that vectors align with raster layers. + const { transform } = canvas.style; + 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); + }); // Build a jpeg data url and update link. const url = mapCanvas.toDataURL('image/jpeg'); From 819159507e568d6ab11ca72e208585f2de4d647b Mon Sep 17 00:00:00 2001 From: Paul Weidner Date: Thu, 18 Jul 2024 11:11:07 -0700 Subject: [PATCH 9/9] Rename output canvas --- src/control/Snapshot/Snapshot.js | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/src/control/Snapshot/Snapshot.js b/src/control/Snapshot/Snapshot.js index 9eb99a3..f88d892 100644 --- a/src/control/Snapshot/Snapshot.js +++ b/src/control/Snapshot/Snapshot.js @@ -78,11 +78,11 @@ class Snapshot extends Control { event.preventDefault(); // Create a new canvas element to combine multiple map canvas data to. - const mapCanvas = document.createElement('canvas'); + const outputCanvas = document.createElement('canvas'); const [width, height] = this.getMap().getSize(); - mapCanvas.width = width; - mapCanvas.height = height; - const mapContext = mapCanvas.getContext('2d'); + outputCanvas.width = width; + outputCanvas.height = height; + const outputContext = outputCanvas.getContext('2d'); // Draw each canvas from this map into the new canvas. // Logic for transforming and drawing canvases derived from ol export-pdf example. @@ -91,7 +91,7 @@ class Snapshot extends Control { .filter(canvas => canvas.width > 0) .forEach((canvas) => { const { opacity } = canvas.parentNode.style; - mapContext.globalAlpha = opacity === '' ? 1 : Number(opacity); + outputContext.globalAlpha = opacity === '' ? 1 : Number(opacity); // Get the transform parameters from the style's transform matrix. // This is necessary so that vectors align with raster layers. @@ -103,18 +103,18 @@ class Snapshot extends Control { // Apply the transform to the export map context. CanvasRenderingContext2D.prototype.setTransform.apply( - mapContext, + outputContext, matrix, ); - mapContext.drawImage(canvas, 0, 0); + outputContext.drawImage(canvas, 0, 0); }); // Build a jpeg data url and update link. - const url = mapCanvas.toDataURL('image/jpeg'); + const url = outputCanvas.toDataURL('image/jpeg'); this.link.href = url; - // Remove the new canvas. - mapCanvas.remove(); + // Remove the output canvas. + outputCanvas.remove(); // Enable the snapshot actions. this.element.classList.add('active');