real3d-portalsite/src/views/ConstructionApplication3D/skylineAnalysis/TJXResult.vue

<template>
    <div style="margin: 1rem; padding: 0.5rem; width: 99%;height: 99%;">
        <!-- <img :src="imageData.data" style="height: auto; width: auto;" />"> -->
        <el-button type="primary" @click="download">下载</el-button>
        <br>
        <canvas id="mycan1" ref="mycan1" style="height: inherit;background-color: transparent;"></canvas>
        <!-- <canvas id="mycan2" ref="mycan2" style="height: inherit;display: none;"></canvas> -->

    </div>
</template>
<script>
import skylineExecute from './skylineExecute.js'
export default {
    props: ['imageData'],
    data() {
        return {
        }
    },
    mounted() {
        this.init()
    },
    methods: {
        init() {
            var that = this;

            //最小高程
            var minH = that.imageData.minH;
            //绘制的长度和宽度
            var viewW = that.imageData.width;
            var viewH = that.imageData.height;

            var skyRgb = that.imageData.rgb
            var canvas1 = that.$refs["mycan1"]
            var canvas2 = that.$refs["mycan2"]
            skylineExecute.drawCanvas(canvas1, canvas2, that.imageData.data, viewW, viewH, skyRgb)
        },
        download() {
            var canvas = this.$refs['mycan1']

            // var context = canvas.getContext("2d")
            var url = canvas.toDataURL("image/png");
            var a = document.createElement('a');
            var event = new MouseEvent('click');
            a.download = (new Date()).getTime() + ".png"; // 指定下载图片的名称
            a.href = url;
            a.dispatchEvent(event); // 触发超链接的点击事件
        }
    }
}
</script>
<style scoped>
.vl-notify-content {
    background-color: white;
}
</style>
    background-color: white;
}
</style>