J'ai créé une carte openlayers avec diverses polylignes. J'utilise le calque openstreetmap par défaut, mais je souhaite l'assombrir pour faire ressortir mes polylignes. J'ai trouvé que je pouvais faire cela comme suit :
map.getLayers().getArray()[0].on('postcompose', function (evt) { evt.context.canvas.style.filter="invert(99%)"; });
Cependant, je souhaite également que mes utilisateurs puissent télécharger cette carte au format PNG. Pour cela j'utilise le code suivant, déclenché en cliquant sur un bouton :
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();
Malheureusement, cela ne conserve pas les modifications que j'ai apportées pour redimensionner la toile.
Quelqu’un peut-il m’aider s’il vous plaît ? Merci pour la lecture.
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
La définition d'un filtre de style sur un élément n'affectera pas la sortie de
toBlob()或toDataURL(). Si vous souhaitez modifier le contexte du canevas plutôt que la façon dont le navigateur restitue le canevas, vous aurez besoin d'une globalCompositeOperation (à en juger par le code que vous utilisez, je suppose que vous utilisez 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'; });