html2canvas 截屏遇到的问题

业务场景，需要在页面上点击按钮截取全屏，中间有一个 antv/l7 绘制的地图，要一起截下来。遇到两个问题:

1. 截下来的图里面没有地图

2. 保存到本地的时候，浏览器显示网络错误下载失败

解决：

第一个问题：

原因是地图里面的用了 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()
})