openlayers-3 - Openlayers 3将 map 导出为png图像大小

Question

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

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

如果 map Canvas 是 1330x440，我得到导出的 png 图像为 2660x880 像素。

知道如何获得与 Canvas 大小相同的导出大小吗？

Answer 1

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

您可以使用 {pixelRatio: 1} 配置 map 并获得模糊 map ，或者在 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();