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

Question

I've created two identical fiddles with different OpenLayers-Versions:

OpenLayers v3.18.0 and OpenLayers 4.1.1

The objective is to export a PNG in high resolution. I didn't include the actual exporting of the file. It is explained here if interested.

It all worked fine up to the newer version (I think until a 4.x version).

If you have the DPI-Setting in windows on 100%, both fiddles do the same - but if you change your DPI-Setting to 125%, the latter fiddle does not update the text Some text! and it becomes really small and is located in the wrong place.

The map stays like that, until I click into it (or I call map.updateSize()). So I thought, I add map.updateSize() at the end of precompose - but no matter where I do it, the exported image is wrong as the updateSize() seems to be async and happening AFTER postcompose.

I didn't find a breaking change regarding this issue. Am I overlooking something or is it a bug? Any suggestion for a workaround?

Answer 1

Thanks to the issue I opened on github I came up with the following solution. The most interesting part is the creation of a second ol.Map with a desired 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();
};