html5-canvas - 开放层 3 : Scaling canvas with text with 125% DPI since v4. x

Question

我用不同的 OpenLayers-Versions 创建了两个相同的 fiddle :

OpenLayers v3.18.0和 OpenLayers 4.1.1

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

在更新版本之前一切正常(我认为直到 4.x 版本)。

如果您在 Windows 中将 DPI-Setting 设置为 100%，则两个 fiddle 都会执行相同的操作 - 但如果您将 DPI-Setting 更改为 125%，则后者不会更新文本 Some text!它变得非常小并且位于错误的位置。

map 保持不变，直到我点击它(或者我调用 map.updateSize() )。所以我想，我加 map.updateSize()在 precompose 结尾- 但无论我在哪里做，导出的图像都是错误的 updateSize()似乎是异步的，并且在 postcompose 之后发生。

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

Answer 1

感谢 issue I opened on 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();
};