cesium实现截图剪裁后保存--html2canvas和vuecropper

<template>
    <div class="screenStyle">
        <div class="screenTitle">
            <span>截图</span>
            <Icon class="colseIcon" title="关闭" type="md-close" @click="closeScreen"/>
            <Button type="primary" @click="down('blob')"  size="small" style="margin-top: 6px;float: right; margin-right: 30px;">保存</Button>
        </div>
        <div ref="screenBody" class="screenBody"  @click="startCrop">
            <vueCropper
                class="myCropper"
                :style="myCropperStyle"
                ref="cropper"
                :img="option.img"
                :outputSize="option.size"
                :outputType="option.outputType"
                :info="true"
                :full="option.full"
                :canMove="option.canMove"
                :canMoveBox="option.canMoveBox"
                :fixedBox="option.fixedBox"
                :original="option.original"
                :autoCrop="option.autoCrop"
                :autoCropWidth="option.autoCropWidth"
                :autoCropHeight="option.autoCropHeight"
                :centerBox="option.centerBox"
                :high="option.high"
                :infoTrue="option.infoTrue"
                :maxImgSize="option.maxImageSize"
                @cropMoving="cropMoving"
                :enlarge="option.enlarge"
                :mode="option.mode"
            ></vueCropper>
        </div>
        <!-- 截图后转换成图片保存 -->
        <a :href="downImg" download="demo.png" ref="downloadDom"></a>
    </div>
</template>

<script>
import html2canvas from 'html2canvas'; // 实现页面截图的类的库
import { VueCropper } from 'vue-cropper'; // 图片裁剪插件
export default {
    name: 'screenshot',
    components: {
        VueCropper
    },
    data () {
        return {
            myCropperStyle: '',
            dialogTableVisible: false,
            downImg: '', // 截图转换的图片
            option: {
                img: '',
                size: 1,
                full: true,
                outputType: 'png',
                canMove: false,
                fixedBox: false,
                original: false,
                canMoveBox: true,
                autoCrop: true,
                // 只有自动截图开启 宽度高度才生效
                autoCropWidth: 600,
                autoCropHeight: 400,
                centerBox: true,
                high: false,
                cropData: {},
                enlarge: 1,
                mode: 'contain',
                maxImgSize: 2000
            }
        };
    },
    methods: {
        closeScreen () {
            this.$store.dispatch('addScreenshotState', false);
        },
        startCrop () {
            this.$refs.cropper.startCrop();
        },
        stopCrop () {
            this.$refs.cropper.stopCrop();
        },
        clearCrop () {
            this.$refs.cropper.clearCrop();
        },
        down (type) {
            // 输出
            if (type === 'blob') {
                this.$refs.cropper.getCropBlob(data => {
                    this.downImg = window.URL.createObjectURL(data);
                    if (window.navigator.msSaveBlob) {
                        var blobObject = new Blob([data]);
                        window.navigator.msSaveBlob(blobObject, 'demo.png');
                    } else {
                        this.$nextTick(() => {
                            this.$refs.downloadDom.click();
                        });
                    }
                });
            } else {
                this.$refs.cropper.getCropData(data => {
                    this.downImg = data;
                    if (window.navigator.msSaveBlob) {
                        var blobObject = new Blob([data]);
                        window.navigator.msSaveBlob(blobObject, 'demo.png');
                    } else {
                        this.$nextTick(() => {
                            this.$refs.downloadDom.click();
                        });
                    }
                });
            }
        },
        cropMoving (data) {
            this.option.cropData = data;
        }
    },
    mounted () {
        const that = this;
        let mapEl = document.getElementById('map'); // 打印地图

        // html2canvas可以通过获取HTML的某个元素，然后生成Canvas，能让用户保存为图片
        // html2canvas(element, options);
        html2canvas(mapEl, {
            logging: true, // 允许在console.log()中输出信息(发现加上对去白边有帮助)
            allowTaint: true, // 不允许跨源图像污染画布
            backgroundColor: null, // canvas的背景颜色,如果没有设定默认透明.解决生成的图片有白边
            useCORS: true // 如果截图的内容里有图片,解决文件跨域问题
        }).then(canvas => {
            that.dataURL = canvas.toDataURL('image/png'); // 图片地址
            that.$nextTick(() => { // 更新数据
                that.option.img = that.dataURL;
                that.myCropperStyle = 'width:' + (mapEl.clientWidth) + 'px;height:' + (mapEl.clientHeight) + 'px;';
            });
        });
    }
};
</script>

<style scoped>
    .screenStyle {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0px;
        z-index: 10000;
        overflow: hidden;
    }
    .screenTitle {
        /*background:rgba(45, 140, 240, 0.5);*/
        background:rgba(3, 149, 255, 0.7);
        width: 100%;
        height: 35px;
        text-align: left;
        position: absolute;
        z-index: 100;
    }
    .screenTitle span{
        color: #fff;
        line-height: 35px;
        margin-left: 5px;
    }
    .screenTitle i{
        margin-right: 7px;
        margin-top: 10px;
        float: right;
        color: #fff;
    }
    .screenBody {
        background-color:#fff;
        width: 100%;
        height:100%;
        /*height: calc(100% - 35px);*/
    }
</style>

1：结果运行无法得到场景截图

截图功能实现了，但是截图结果是一片黑（cesium的背景图，有标尺但是没有天空盒，球体）
这种情况在cesium的初始化里加上这段代码

		var viewer= new Cesium.Viewer('cesiumContainer', {
                imageryProvider: new Cesium.TiandituImageryProvider({mapStyle: Cesium.TiandituMapsStyle.IMG_C}),
                animation: false,
                timeline: false,
                baseLayerPicker: false,
                geocoder: false,
                homeButton: false,
                sceneModePicker: false,
                navigationHelpButton: false,
                // 解决html2canvas结果运行无法得到场景截图：
                contextOptions: {
                    webgl: {
                        alpha: true,
                        depth: true,
                        stencil: true,
                        antialias: true,
                        premultipliedAlpha: true,
                        //通过canvas.toDataURL()实现截图需要将该项设置为true
                        preserveDrawingBuffer: true,
                        failIfMajorPerformanceCaveat: true
                    }
                }
            });