OpenLayers - 将地图保存为具有自定义名称的 png 图像答案

【问题标题】：OpenLayers - save map as png image with custom nameOpenLayers - 将地图保存为具有自定义名称的 png 图像
【发布时间】：2021-12-30 07:15:43
【问题描述】：

我想将我的地图保存为 .png 图像。我已经用下面的代码做到了。不幸的是，似乎缺少某些内容，因为我无法以自定义名称保存它。

document.getElementById('export-png').addEventListener('click', function () {
  map.once('rendercomplete', function () {
  var mapCanvas = document.createElement('canvas');
  var size = map.getSize();
  mapCanvas.width = size[0];
  mapCanvas.height = size[1];
  var mapContext = mapCanvas.getContext('2d');
  Array.prototype.forEach.call(
  document.querySelectorAll('.ol-layer canvas'),
  function (canvas) {
    if (canvas.width > 0) {
      var opacity = canvas.parentNode.style.opacity;
      mapContext.globalAlpha = opacity === '' ? 1 : Number(opacity);
      var transform = canvas.style.transform;
      // Get the transform parameters from the style's transform matrix
      var matrix = transform
        .match(/^matrix\(([^\(]*)\)$/)[1]
        .split(',')
        .map(Number);
      // Apply the transform to the export map context
      CanvasRenderingContext2D.prototype.setTransform.apply(
        mapContext,
        matrix
      );
      mapContext.drawImage(canvas, 0, 0);
    }
  }
 );
 if (navigator.msSaveBlob) {
   // link download attribuute does not work on MS browsers
   var imgName = prompt("Please provide the name", "survey_map");
   navigator.msSaveBlob(mapCanvas.msToBlob(), imgName + '.png');
 } else {
   var link = document.getElementById('image-download');
   link.href = mapCanvas.toDataURL();
   link.click();
 }
});
 map.renderSync();
 });

我用了prompt属性，但是这里好像不行。

是否可以为这个 png 图片设置自定义名称？

【问题讨论】：

标签： javascript png openlayers

【解决方案1】：

您的代码仅适用于 Internet Explorer 和旧版 Edge。对于其他浏览器，您需要设置链接的下载属性。您还应该检查是否单击了取消按钮（否则您将下载 null.png）

 var imgName = prompt("Please provide the name", "survey_map");
 if (imgName) {
   if (navigator.msSaveBlob) {
     // link download attribuute does not work on MS browsers
     navigator.msSaveBlob(mapCanvas.msToBlob(), imgName + '.png');
   } else {
     var link = document.getElementById('image-download');
     link.download = imgName + '.png';
     link.href = mapCanvas.toDataURL();
     link.click();
   }
 }

【讨论】：