我制作了一张 openlayers 地图，上面有各种折线。我正在使用默认的 openstreetmap 图层，但想将其变暗以使我的折线脱颖而出。我发现我可以按如下方式执行此操作：
map.getLayers().getArray()[0].on('postcompose', function (evt) {
evt.context.canvas.style.filter="invert(99%)";
});
但是，我还想让我的用户能够以 PNG 格式下载此地图。为此，我使用以下代码，通过单击按钮触发：
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();
不幸的是，这并没有保留我为调整画布所做的修改。
请问有人可以帮助我吗？感谢您的阅读。
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
在元素上设置样式过滤器不会影响
toBlob()或toDataURL()的输出。如果您想更改画布上下文而不是浏览器渲染画布的方式，您将需要一个 globalCompositeOperation （从您正在使用的代码来看，我假设您正在使用 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'; });