Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

363
Visualizações
Openlayers export canvas after a postrender style change

I have a Vue SPA which has an OpenLayers 6 map. Said Map is updated in a for loop which waits for rendercomplete events to fire to export the map canvas using the following function :

getMapCanvas () {
    var mapCanvas = document.createElement('canvas');
    var divElement = document.querySelector(".map");
    mapCanvas.width = divElement.offsetWidth;//size[0];
    mapCanvas.height = divElement.offsetHeight;//size[1];
    var mapContext = mapCanvas.getContext('2d');
    Array.prototype.forEach.call(
        document.querySelectorAll('.ol-layer canvas'),
        function (canvas) {
            if (canvas.width > 0) {
                const opacity = canvas.parentNode.style.opacity;
                mapContext.globalAlpha = opacity === '' ? 1 : Number(opacity);
                const transform = canvas.style.transform;
                const matrix = transform
                                        .match(/^matrix\(([^\(]*)\)$/)[1] //eslint-disable-line
                                        .split(',')
                                        .map(Number);
                CanvasRenderingContext2D.prototype.setTransform.apply(mapContext,matrix);
                mapContext.drawImage(canvas, 0, 0);
            }
        }
    );
    return mapCanvas;
},

The problem is that after I turn on dark mode using :

this.map.getLayers().getArray()[0].on(['postrender'], (evt) => {
    if ( this.darkOSM !== null && this.darkOSM === false ) {
        evt.context.globalCompositeOperation = 'color';
        evt.context.fillStyle = 'rgba(0,0,0,' + 1.0 + ')';
        evt.context.fillRect(0, 0, evt.context.canvas.width, evt.context.canvas.height);
        evt.context.globalCompositeOperation = 'overlay';
        evt.context.fillStyle = 'rgb(' + [200,200,200].toString() + ')';
        evt.context.fillRect(0, 0, evt.context.canvas.width, evt.context.canvas.height);
        evt.context.globalCompositeOperation = 'source-over';
        document.querySelector('canvas').style.filter="invert(99%)";
    } 
});

Instead of getting the first image below (dark mode I see on the screen) I get the second image below :

enter image description here enter image description here

about 4 years ago · Juan Pablo Isaza
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda