英文:
Apply an openlayers filter and have it persist when I save the map as an image
问题
我已经创建了一个包含各种折线的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();
不幸的是,这样做不会保留我对画布所做的修改。请有人可以帮助我吗?谢谢你的阅读。
英文:
I have made an openlayers map with various polylines on it. I am using the default openstreetmap layer, but would like to darken it to make my polylines stand out. I've discovered that I can do this as follows:
map.getLayers().getArray()[0].on('postcompose', function (evt) {
evt.context.canvas.style.filter="invert(99%)";
});
However, I'd also like to give my users the ability to download this map as a PNG. For that, I am using the following code, triggered from a button click:
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 amendment I made to adjust the canvas.
Please can someone help me? Thank you for reading.
答案1
得分: 1
在元素上设置样式过滤器不会影响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';
});
英文:
Setting a style filter on an element will not affect the output of toBlob()
or toDataURL()
. If you want to change the canvas context instead of how the browser renders the canvas you will need a globalCompositeOperation (from the code you are using I presume 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';
});
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论