cesium实现场景导出图片功能

Cesium实战系列文章总目录： 传送门

1. 实现效果

导出后的场景图片为：

2. 实现方法

核心功能实现代码如下：

/**
 * @description: 场景导出
 * @param {*} _viewer
 * @return {*}
 */
function saveToImage(_viewer) {
    // 不写会导出为黑图
    _viewer.render();

    let canvas = _viewer.scene.canvas;
    let image = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");

    let link = document.createElement("a");
    let blob = dataURLtoBlob(image);
    let objurl = URL.createObjectURL(blob);
    link.download = "scene.png";
    link.href = objurl;
    link.click();
}

function dataURLtoBlob(dataurl) {
    let arr = dataurl.split(','),
        mime = arr[0].match(/:(.*?);/)[1],
        bstr = atob(arr[1]),
        n = bstr.length,
        u8arr = new Uint8Array(n);
    while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
    }
    return new Blob([u8arr], {
        type: mime
    });
}