OpenLayers 3：自 v4.x 以来，使用 125% DPI 的文本缩放 canvas

Question

我创建了两个具有不同 OpenLayers 版本的相同 fiddle：

objective 以高分辨率导出 PNG。我没有包括文件的实际导出。有兴趣的再解释here

在新版本之前一切正常（我认为直到 4.x 版本）。

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

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

我没有发现关于此问题的重大更改。我是在忽略什么还是一个错误？有任何解决方法的建议吗？

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();
};

OpenLayers 3：自 v4.x 以来，使用 125% DPI 的文本缩放 canvas

OpenLayers 3: Scaling canvas with text with 125% DPI since v4.x

openlayers

html5-canvas

openlayers-3