Cesium场景导出为图片功能

Cesium场景导出为图片

前言

很多时候用户需要将场景导出为图片进行使用，Cesium可以通过canvas的方式将场景导出为图片文件，达到我们想要的效果

效果图

关键代码

export function saveToFile(scene) {
    let canvas = 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 });
}

详情参见 Cesium实战专栏