OpenLayers 3: Scaling canvas with text at 125% DPI with v4.x
I've created two identical scripts with different versions of OpenLayers:
OpenLayers v3.18.0 and OpenLayers 4.1.1
The goal is to export the PNG in high resolution. I have not included the actual export of the file. It is explained here if interested.
Everything worked fine until the new version (I think before the 4.x version).
If you have DPI setting in windows at 100%, both violins do the same - but if you change DPI setting to 125%, the last violin won't update the text. Some lyrics! and it becomes very small and in the wrong place.
The card stays that way until I click it (or I call it map.updateSize()
). So I thought, I add map.updateSize()
at the end precompose
- but no matter where I do it, the exported image is wrong as updateSize()
it seems asynchronous and happens AFTER postcomposition.
I have not found a drastic change to this problem. Am I missing something or is this a bug? Any suggestion for a workaround?
source to share
Thanks to a problem I opened on github I came up with the following solution. The most interesting part is creating the second one ol.Map
with the desired one 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();
};
source to share