Openlayers 3 将地图导出为 png 图像大小

Question

我正在尝试将 openlayers 3 地图导出为 PNG。

这个例子运行良好 http://openlayers.org/en/master/examples/export-map.html ，但是导出图像的宽度和高度是原始地图画布的两倍。

如果地图画布为 1330x440，我将导出的 png 图像设为 2660x880 像素。

知道如何使导出大小与画布大小相同吗？

Answer 1

这是因为您的设备像素比为 2，因为您有一个 HiDPI (Retina) 显示屏。

您可以使用{pixelRatio: 1} 配置地图并获得模糊地图，或者在ol.has.DEVICE_PIXEL_RATIO 不等于1 时缩放导出的图像：

map.once('postcompose', function(event) {
  var dataURL;
  var canvas = event.context.canvas;
  if (ol.has.DEVICE_PIXEL_RATIO == 1) {
    dataURL = canvas.toDataURL('image/png');
  } else {
    var targetCanvas = document.createElement('canvas');
    var size = map.getSize();
    targetCanvas.width = size[0];
    targetCanvas.height = size[1];
    targetCanvas.getContext('2d').drawImage(canvas,
        0, 0, canvas.width, canvas.height,
        0, 0, targetCanvas.width, targetCanvas.height);
    dataURL = targetCanvas.toDataURL('image/png');
  }
});
map.renderSync();