I made an openlayers map with various polylines on it. I'm using the default openstreetmap layer, but want to darken it to make my polylines stand out. I found that I can do this as follows:
map.getLayers().getArray()[0].on('postcompose', function (evt) {
evt.context.canvas.style.filter="invert(99%)";
});
However, I also want my users to be able to download this map in PNG format. To do this, I use the following code, triggered by clicking a button:
map.once('postcompose', function(event) {
var canvas = event.context.canvas;
if (navigator.msSaveBlob) {
navigator.msSaveBlob(canvas.msToBlob(), 'mymap.png');
} else {
canvas.toBlob(function(blob) {
saveAs(blob, 'mymap.png')
});
}
});
map.renderSync();
Unfortunately this does not preserve the modifications I made to resize the canvas.
Can anyone help me? Thank you for reading.
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Setting a style filter on an element will not affect the output of
toBlob()ortoDataURL(). If you want to change the canvas context rather than how the browser renders the canvas, you will need a globalCompositeOperation (judging from the code you are using, I assume you are using OpenLayers 5):map.getLayers().getArray()[0].on('postcompose', function (evt) { evt.context.globalCompositeOperation = 'difference'; evt.context.fillStyle = 'white'; evt.context.fillRect(0, 0, evt.context.canvas.width, evt.context.canvas.height); evt.context.globalCompositeOperation = 'source-over'; });