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;" />"> -->
        <canvas id="mycan1" ref="mycan1" width="907" height="350" style="background-color: azure;display: ;"></canvas>
        <canvas id="mycan2" ref="mycan2" width="907" height="350"></canvas>
        <el-button type="primary" @click="download">下载</el-button>
        <!-- <img id="img"  ref="img" style=" width: 100%;height: :100%;"/> -->
    </div>
</template>
<script>

export default {
    props: ['imageData'],
    data() {
        return {
        }
    },
    mounted() {
        this.init()
    },
    methods: {
        init() {
            var that = this;

            var image = new Image();
            var minH = that.imageData.minH;

            image.src = this.imageData.data;
            // image.onload = function () {
            //     var canvas1 = that.$refs["mycan1"]
            //     var canvas2 = that.$refs["mycan2"]
            //     var context = canvas2.getContext("2d")
            //     canvas2.width = image.width;
            //     canvas2.height = image.height;
            //     var dW = image.width
            //     var dh = image.height

            //     var xRate = dW / that.imageData.width;
            //     var yRate = dh / that.imageData.height;
            //     var clipH = minH * yRate
            //     var scale = that.imageData.height / (that.imageData.height - minH)

            //     var drawScaleY = 350 / image.height;


            //     yRate = canvas2.height / that.imageData.height;
            //     scale = canvas2.height / (canvas2.height - clipH * drawScaleY)
            //     context.drawImage(image, 0, 0, image.width, image.height, 0, 0, canvas2.width, canvas2.height);
            //     // context.fillStyle = '#fff';
            //     // context.fillRect(0, 0, canvas2.width, canvas2.height);
            //     // 将canvas的透明背景设置成白色
            //     var imageData = context.getImageData(0, 0, canvas2.width, canvas2.height);

            //     // 遍历像素点，将彩色像素点转换为黑白像素点

            //     for (var i = 0; i < imageData.data.length; i += 4) {

            //         debugger
            //         var r = imageData.data[i];


            //         var g = imageData.data[i + 1];

            //         var b = imageData.data[i + 2];
            //         // var a = imageData.data[i + 3];
            //         if (r == 0 && b == 0 && g == 0) {

            //             imageData.data[i] = 132;

            //             imageData.data[i + 1] = 180;

            //             imageData.data[i + 2] = 237;
            //         }
            //     }
            //     context.putImageData(imageData, 0, 0)
            //     context.strokeStyle = "rgba(255,0,0,1)";
            //     context.lineWidt = 25
            //     context.strokeRect(0, 0, canvas2.width, canvas2.height)

            //     yRate = canvas2.height / (that.imageData.height);

            //     var dataX = parseInt(that.imageData.width / 50) * 10
            //     for (var i = 0; i <= that.imageData.width; i += dataX) {
            //         context.font = "20px serif";
            //         context.strokeText(i, i * xRate, 20);
            //         context.strokeText(i, i * xRate, canvas2.height);
            //     }

            //     var datay = parseInt(that.imageData.height / 50) * 10
            //     for (var j = datay; j <= that.imageData.height; j += datay) {
            //         context.font = "20px serif";
            //         context.strokeText(j, 10, canvas2.height - j * yRate);
            //         context.strokeText(j, canvas2.width - 50, canvas2.height - j * yRate);
            //     }
            //     //context.scale(1, scale)
            // }
            image.onload = function () {
                var canvas1 = that.$refs["mycan1"]
                var canvas2 = that.$refs["mycan2"]
                var ctx = canvas1.getContext("2d");

                // canvas1.height = image.height;
                // canvas1.width = image.width;
                var xRate = canvas1.width / that.imageData.width;
                var yRate = canvas1.height / that.imageData.height;

                var clipH = minH * yRate;

                // canvas1.height -= clipH;

                ctx.drawImage(image, 0, 0, image.width, image.height , 0, 0, canvas1.width, canvas1.height);

                // var canvasData = ctx.getImageData(0, 0, canvas1.width, canvas1.height); //读取图片数据
                // var lOffset = canvasData.width;
                // var rOffset = 0;
                // var tOffset = canvasData.height;
                // var bOffset = 0;
                // for (var i = 0; i < image.width; i++) {
                //     for (var j = 0; j < image.height; j++) {
                //         // var pos = (i + canvas1.width * j) * 4
                //         var pos = (i + image.width * j) * 4
                //             if (canvasData.data[pos] == 0|| canvasData.data[pos + 1] == 0 || canvasData.data[pos + 2] == 0 || canvasData.data[pos + 3] ==0) {
                //             bOffset = Math.max(j, bOffset); // 找到有色彩的最下端
                //             rOffset = Math.max(i, rOffset); // 找到有色彩的最右端
                //             tOffset = Math.min(j, tOffset); // 找到有色彩的最上端
                //             lOffset = Math.min(i, lOffset); // 找到有色彩的最左端
                //         }
                //     }
                // }
                // for(var j=0;j<image.height;j++)
                // {
                //     for(var i=0;i<image.width;i++)
                //     {
                        
                //     }
                // }


                // lOffset++;
                // rOffset++;
                // tOffset++;
                // bOffset++;

                // canvas2.width = rOffset - lOffset;
                // canvas2.height = bOffset - tOffset;

                // xRate = canvas2.width / that.imageData.width;
                // yRate = canvas2.height / that.imageData.height;
                // debugger
                // var context = canvas2.getContext("2d");
                // var drawScaleY = canvas2.height / canvas1.height;


                // // context.putImageData(canvasData, lOffset, tOffset, canvas1.width, canvas1.height, 0, 0, canvas2.width, canvas2.height);//绘制
                // context.putImageData(canvasData, lOffset, tOffset)
                // var canvasData2 = context.getImageData(0, 0, canvas2.width, canvas2.height);

                // // // 遍历像素点，将彩色像素点转换为黑白像素点
                // // for (var i = 0; i < canvasData2.data.length; i += 4) {
                // //     var r = canvasData2.data[i];
                // //     var g = canvasData2.data[i + 1];
                // //     var b = canvasData2.data[i + 2];
                // //     // var a = imageData.data[i + 3];
                // //     if (r == 0 && b == 0 && g == 0) {
                // //         canvasData2.data[i] = 132;
                // //         canvasData2.data[i + 1] = 180;
                // //         canvasData2.data[i + 2] = 237;
                // //     }
                // // }
                // // context.putImageData(canvasData2, 0, 0)

                // context.strokeStyle = "rgba(255,0,0,1)";
                // var dataX = parseInt(that.imageData.width / 50) * 10;
                // for (var i = 0; i <= that.imageData.width; i += dataX) {
                //     context.font = "20px serif";
                //     context.strokeText(i, i * xRate, 20);
                //     context.strokeText(i, i * xRate, canvas2.height);
                // }
                // var datay = parseInt(that.imageData.height / 50) * 10;
                // for (var j = datay; j <= that.imageData.height; j += datay) {
                //     context.font = "20px serif";
                //     context.strokeText(j, 10, canvas2.height - j * yRate);
                //     context.strokeText(j, canvas2.width - 30, canvas2.height - j * yRate);
                // }
                // console.log(canvas2.toDataURL());//得到最终裁剪出来的base64
            }
        },
        download() {
            var canvas = this.$refs['mycan1']

            // var context = canvas.getContext("2d")
            var url = canvas.toDataURL("image/jpeg");
            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>) -->