业务场景,需要在页面上点击按钮截取全屏,中间有一个 antv/l7 绘制的地图,要一起截下来。遇到两个问题:
-
截下来的图里面没有地图
-
保存到本地的时候,浏览器显示网络错误下载失败
解决:
第一个问题:
原因是地图里面的用了 webgl 导致的。刚开始是打算把地图里面的 canvas 单独获取绘制成图片,然后插入到地图原本位置。再然后使用 html2canvas 绘制。后来发现不用自己转为图片,antv/l7 中有直接将地图导出为图片的方法,scene.exportMap('png') ,图片的大小刚好就是地图容器的大小不用再特意调节大小。将导出的图片放到原位置,再使用 html2canvas 绘制成 canvas 再下载
第二个问题:
主要出现这个问题是canvas保存图片到本地时各个浏览器像素的限制不同,所以将图片数据转换成 Blob 数据流下载下来就行了。将 html2canvas 转换后的图片转为 DataURL ,然后再将 dataURL 转为 blob 对象,再用 a 下载
1. dataURLtoBlob
dataURLtoBlob (dataurl) {
let arr = dataurl.split(',')
let mime = arr[0].match(/:(.*?);/)[1]
// atob() 方法用于解码使用 base-64 编码的字符串
let bstr = atob(arr[1])
let n = bstr.length
let u8arr = new Uint8Array(n)
while (n--) {
u8arr[n] = bstr.charCodeAt(n)
}
return new Blob([u8arr], {type: mime})
}
2. 下载
html2canvas(document.body).then(canvas => {
let link = document.createElement('a')
let imgData = canvas.toDataURL({ format: 'png', mutiplier: 4 })
let blob = dataURLtoBlob(imgData)
let objurl = URL.createObjectURL(blob)
link.download = 'screenshot'
link.href = objurl
link.click()
})