Openlayers 3導出地圖到PNG圖像大小

Question

我想導出openlayers 3地圖到PNG。

該示例運行良好http://openlayers.org/en/master/examples/export-map.html，但導出圖像的寬度和高度比原始地圖畫布高一倍。

如果地圖畫布是1330x440，我得到導出的png圖像爲2660x880像素。

任何想法如何獲得導出大小相同的畫布大小？

Answer 1

這是因爲您的設備像素比例爲2，因爲您有HiDPI（視網膜）顯示屏。

您可以用{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();