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

Posted 2023-03-28

【中文标题】OpenLayers - 将地图保存为具有自定义名称的 png 图像

【英文标题】：OpenLayers - save map as png image with custom name

【发布时间】：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 图片设置自定义名称？

【参考方案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();