OpenLayers 3：自 v4.x 起以 125% DPI 缩放带有文本的画布

Question

我用不同的 OpenLayers-Versions 创建了两个相同的小提琴：

OpenLayers v3.18.0和OpenLayers 4.1.1

目标是以高分辨率导出PNG。我没有包括文件的实际导出。如果有兴趣，这里会解释。

在更新版本之前，一切都很好（我认为直到 4.x 版本）。

如果您将 Windows 中的 DPI 设置设为 100%，则两个小提琴都会执行相同的操作 - 但如果您将 DPI 设置更改为 125%，则后一个小提琴不会更新文本某些文本！它变得非常小并且位于错误的位置。

地图保持原样，直到我点击进入（或我调用map.updateSize()）。所以我想，我map.updateSize()在最后添加precompose- 但无论我在哪里做，导出的图像都是错误的，因为它updateSize()似乎是异步的并且在 postcompose之后发生。

我没有发现关于这个问题的重大变化。我忽略了什么还是一个错误？任何解决方法的建议？

Answer 1

感谢我在 github 上打开的问题，我想出了以下解决方案。最有趣的部分是创建第二个ol.Map具有所需的部分pixelRatio：

saveToFile = function (fileName, opt_ChangeSize, opt_PixelRatio, opt_DelayRenderPromise) {
  var newMapComponent,
      originalSize = mapComponent.getSize();

  opt_ChangeSize = opt_ChangeSize || { width: originalSize[0], height: originalSize[1] };

  var div = $(document.createElement("div"));
  div.attr('id', 'DIV_SaveToFile_Renderer_' + (new Date()).getTime());
  div.css('position', 'absolute');
  div.css('top', '0');
  div.css('left', '0');
  div.css('visibility', 'hidden');
  div.css('width', opt_ChangeSize.width + 'px');
  div.css('height', opt_ChangeSize.height + 'px');
  $('body').append(div);

  newMapComponent = new ol.Map({
      target: div[0].id,
      layers: mapComponent.getLayers(),
      pixelRatio: opt_PixelRatio,
      view: mapComponent.getView()
  });

  // opt_DelayRenderPromise in this case returns when loading of some features has completed. It could also be postrender of map or whatever.
  $q.when(opt_DelayRenderPromise).then(function () {
      $timeout(function () {
          var data,
              canvas = div.find('canvas')[0];

          data = canvas.toDataURL('image/png');
          data = data.replace(/^data:image\/(png);base64,/, "");
          MyUtilities.SaveBlobFromBase64(data, fileName);

          div.remove();

          mapComponent.setSize(originalSize);
          mapComponent.renderSync();
      });
  });

  mapComponent.setSize([opt_ChangeSize.width, opt_ChangeSize.height]);
  mapComponent.renderSync();
};