<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://openlayers.org/en/v5.3.0/css/ol.css" />
<script type="text/javascript" src="https://openlayers.org/en/v5.3.0/build/ol.js"></script>
<script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/FileSaver.js/2014-11-29/FileSaver.min.js"></script>
<title>openlayers地图截图</title>
</head>
<body>
<div id="map"></div>
<button id="btn" onclick="toImg()">打印</button>
<script>
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
view: new ol.View({
center: [ 91.1, 30.41],
zoom: 4
})
})
function toImg() {
map.once('postcompose', function (event) {
var canvas = event.context.canvas
canvas.toBlob(function (blob) {
saveAs(blob, 'map2.png')
})
})
map.renderSync()
}
</script>
<style>
#map{
60%;
height: 50%;
}
</style>
</body>
</html>