diff options
author | Anton Tananaev <anton.tananaev@gmail.com> | 2021-09-08 21:48:21 -0700 |
---|---|---|
committer | Anton Tananaev <anton.tananaev@gmail.com> | 2021-09-08 21:48:21 -0700 |
commit | 5e990d01056efffbd69b06938d8d2397382e94ee (patch) | |
tree | cfdb5e180afa02ad2b0ba569491a1faf35896e1e /modern/src | |
parent | a7b243a894f9b1b09cc9478104b920ec47a94380 (diff) | |
download | trackermap-web-5e990d01056efffbd69b06938d8d2397382e94ee.tar.gz trackermap-web-5e990d01056efffbd69b06938d8d2397382e94ee.tar.bz2 trackermap-web-5e990d01056efffbd69b06938d8d2397382e94ee.zip |
Disable icon tinting in Firefox
Diffstat (limited to 'modern/src')
-rw-r--r-- | modern/src/map/mapUtil.js | 34 |
1 files changed, 28 insertions, 6 deletions
diff --git a/modern/src/map/mapUtil.js b/modern/src/map/mapUtil.js index e3c32f46..99109635 100644 --- a/modern/src/map/mapUtil.js +++ b/modern/src/map/mapUtil.js @@ -1,5 +1,4 @@ import { parse, stringify } from 'wellknown'; -import canvasTintImage from 'canvas-tint-image'; import circle from '@turf/circle'; export const loadImage = (url) => new Promise((imageLoaded) => { @@ -8,12 +7,31 @@ export const loadImage = (url) => new Promise((imageLoaded) => { image.src = url; }); -export const prepareIcon = (background, icon, color) => { - const pixelRatio = window.devicePixelRatio; +const canvasTintImage = (image, color) => { + const canvas = document.createElement('canvas'); + canvas.width = image.width * devicePixelRatio; + canvas.height = image.height * devicePixelRatio; + canvas.style.width = `${image.width}px`; + canvas.style.height = `${image.height}px`; + + const context = canvas.getContext('2d'); + context.save(); + context.fillStyle = color; + context.globalAlpha = 1; + context.fillRect(0, 0, canvas.width, canvas.height); + context.globalCompositeOperation = "destination-atop"; + context.globalAlpha = 1; + context.drawImage(image, 0, 0, canvas.width, canvas.height); + context.restore(); + + return canvas; +} + +export const prepareIcon = (background, icon, color) => { const canvas = document.createElement('canvas'); - canvas.width = background.width * pixelRatio; - canvas.height = background.height * pixelRatio; + canvas.width = background.width * devicePixelRatio; + canvas.height = background.height * devicePixelRatio; canvas.style.width = `${background.width}px`; canvas.style.height = `${background.height}px`; @@ -24,7 +42,11 @@ export const prepareIcon = (background, icon, color) => { const iconRatio = 0.5; const imageWidth = canvas.width * iconRatio; const imageHeight = canvas.height * iconRatio; - context.drawImage(canvasTintImage(icon, color, 1), (canvas.width - imageWidth) / 2, (canvas.height - imageHeight) / 2, imageWidth, imageHeight); + if (navigator.userAgent.indexOf("Firefox") > 0) { + context.drawImage(icon, (canvas.width - imageWidth) / 2, (canvas.height - imageHeight) / 2, imageWidth, imageHeight); + } else { + context.drawImage(canvasTintImage(icon, color), (canvas.width - imageWidth) / 2, (canvas.height - imageHeight) / 2, imageWidth, imageHeight); + } } return context.getImageData(0, 0, canvas.width, canvas.height); |