Creating a bigger exported Image by increasing the Canvas-size. The Upscaling is done in the precompose-Event. If "downscaled" its comparible to an image with 300dpi
Export PNGThe Canvas is "downscaled" by the the CSS-Container wrapping it. Exaggerated to demonstrate a "high-dpi" effect.
<!DOCTYPE html>
<html>
<head>
<title>Export Map: PNG with "high resolution"</title>
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.7.0/ol.css" type="text/css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.7.0/ol.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="row-fluid">
<div id="map" class="map"></div>
<div id="no-download" class="alert alert-error" style="display: none">
This example requires a browser that supports the
<a href="http://caniuse.com/#feat=download">link download</a> attribute.
</div>
<a id="export-png" class="btn btn-default" download="map.png"><i class="glyphicon glyphicon-download"></i><b>Export zoomed PNG (if back "downscaled" its comparible to an image with 300dpi) </b></a>
</div>
</div>
<script>
var map = new ol.Map({
layers: [
new ol.layer.Vector({
source: new ol.source.Vector({
url: 'data/countries.geojson',
format: new ol.format.GeoJSON()
})
})
],
target: 'map',
controls: ol.control.defaults({
attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
collapsible: false
})
}),
view: new ol.View({
center: [0, 0],
zoom: 2
})
});
map.addControl(new ol.control.ScaleLine());
/**##############################################################**/
/** export "high resolution" Image
**/
var exportPNGElement = document.getElementById('export-png');
var canvas = $('canvas').get(0);
function setDPI(canvas, dpi) {
var scaleFactor = dpi / 96;
canvas.width = Math.ceil(canvas.width * scaleFactor);
canvas.height = Math.ceil(canvas.height * scaleFactor);
var ctx=canvas.getContext("2d");
ctx.scale(scaleFactor, scaleFactor);
}
if ('download' in exportPNGElement) {
exportPNGElement.addEventListener('click', function(e) {
map.once('precompose', function(event) {
setDPI(canvas,300);
});
map.once('postcompose', function(event) {
var canvas = event.context.canvas;
exportPNGElement.href = canvas.toDataURL('image/png');
});
map.renderSync();
}, false);
} else {
alert('error on creating PNG');
}
</script>
</body>
</html>