方法1
//this.map._this为初始化地图对象
this.map._this.once('postcompose', function (event) {
var canvas = event.context.canvas;
if (navigator.msSaveBlob) {
navigator.msSaveBlob(canvas.msToBlob(), 'map.png');
} else {
canvas.toBlob(function (blob) {
saveAs(blob, 'map.png');
});
}
});
this.map._this.renderSync();
方法2 调用html2canvas插件
html2canvas(document.getElementById('map_container'), {
allowTaint: false,
foreignObjectRendering: true,
taintTest: false,
useCORS: true,//火狐浏览器添加项
onrendered: function (canvas) {
var image = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
var userAgent = navigator.userAgent;
//判断是否是IE11
if (-1 !== userAgent.indexOf("Trident")) {
var arr = image.split(',');
var mime = arr[0].match(/:(.*?);/)[1];
var bstr = atob(arr[1]);
var n = bstr.length;
var u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
window.navigator.msSaveBlob(new Blob([u8arr], { type: mime }), "download.png");
} else {
canvas.id = "mycanvas";
//生成base64图片数据
var dataUrl = canvas.toDataURL();
var newImg = document.createElement("img");
newImg.setAttribute('crossOrigin', 'anonymous');
newImg.src = dataUrl;
var b = document.createElement('a')
b.setAttribute("href", dataUrl)
b.setAttribute("download", "img.png")
document.body.appendChild(b)//火狐浏览器添加项
b.click(); b.remove()
}
}
});