vue实现热成像展示，点击红外图片展示温度

<template>
    <div id="HeatMap" @mouseup="releaseChange">
        <div class="img-container flex-end" ref="imgContainer">
            <div class="slider-handle" @mousedown="changeWidth" ref="handle" v-if="slider">
                <img src="../../assets/img/slider.png" alt="">
            </div>
            <img :src="images[0]" alt="加载失败" ref="img" v-if="slider">
            <div class="heatmap-container" ref="heatmapContainer">
                <canvas ref="heatmap" class="heat-img" id="canvas" @click.prevent.stop="showTemperature"></canvas>
                <!-- <img :src="images[1]" alt="加载失败"  class="heat-img"> -->
            </div>
        </div>
        <div class="img-pages flex-between">
            <div class="page-change-arrows ">
                <el-slider v-model="value" :show-tooltip="false" :min="-10" :step="0.1" :max="0" @input="sliderWidth"></el-slider>
            </div>
            <div class="page-change-arrows" style="margin-right:30px">
                <el-slider v-model="value" :show-tooltip="false" :min="-10" :step="0.1" :max="0" @input="sliderWidth"></el-slider>
            </div>
        </div>
        <div class="temp-tips" ref="tips" v-show="temp" @click="temp=false">{{temperature}}</div>
    </div>
</template>
<script>
import mixin from '../../mixin/mixin'
export default {
    mixins: [mixin],
    data() {
        return {
            images: [],
            currentImg: 0,
            slider: true,
            imgClientRect: {},
            width: 0,
            oldx: 0,
            height: 0,
            temp: false,
            temperature: 0,
            ctx: null,
            x: 0,
            y: 0,
            value: -5,
            sliderChange: true
        }
    },
    name: "HeatMap",
    mounted() {
        let imgArry = this.bsr.images.split('|')
        if (!imgArry[0]) {
            imgArry.shift()
            this.slider = false
        }
        imgArry.forEach(v => {
            this.images.push(window.$DATADIR + `resc/HeatMap/${this.bsr.id}/${v.replace(/\..*/, '.bosj')}`)
            this.pages = this.images.length - 1
        })
        this.getImgWidth(this.$refs.img)

    },
    methods: {
        changeImgToThisIndex(index) {
            this.$refs.heatmapContainer.style.width =
                this.currentImg = index
        },
        mouseMove(e) {
            if (this.oldx <= 0) {
                this.oldx = e.clientX
                console.log(111)
                return
            }
            let selfWidth = parseInt(this.$refs.heatmapContainer.style.width) - (e.clientX - this.oldx)
            if (selfWidth + 5 >= this.width && (e.clientX - this.oldx) < 0) {
                return
                // (e.clientX - this.oldx) > 0 ? '11px' : selfWidth - 1 + 'px'
            }
            if (selfWidth - 10 <= 0 && (e.clientX - this.oldx > 0)) {
                return
            }

            this.$refs.heatmapContainer.style.width = selfWidth + 'px'
            this.$refs.handle.style.left = this.$refs.heatmap.width - selfWidth + 'px'
            this.value = -selfWidth / this.width * 10
            this.oldx = e.clientX
            // console.log(this.oldx)

        },
        sliderWidth(val) {
            if (!this.sliderChange) return
            // let selfWidth = parseInt(this.$refs.heatmapContainer.style.width)
            if (val === -10) {
                this.$refs.heatmapContainer.style.width = this.width - 5 + 'px'
                this.$refs.handle.style.left = '5px'
            } else if (val === 0) {
                this.$refs.heatmapContainer.style.width = 10 + 'px'
                this.$refs.handle.style.left = this.$refs.heatmap.width - 10 + 'px'

            } else {
                this.$refs.heatmapContainer.style.width = Math.abs(this.width / 100 * (val * 10)) + 'px'
                this.$refs.handle.style.left = this.width / 100 * (val + 10) * 10 + 'px'
            }

            console.log(val, key)
        },
        drawImg() {
            let canvas = document.getElementById('canvas')
            this.ctx = canvas.getContext('2d')
            let img = new Image()
            img.src = this.images[1]
            img.onload = () => {
                console.log(img)
                canvas.width = this.width
                canvas.height = this.height
                this.ctx.drawImage(img, 0, 0, this.width, this.height)
            }
        },
        showTemperature(e) {
            console.log(e)
            this.temp = true
            this.$nextTick(() => {
                this.$refs.tips.style.left = e.clientX + 'px'
                this.$refs.tips.style.top = e.clientY + 'px'
            })
            console.log(e.clientX, e.clientY)
            let imgData = this.ctx.getImageData(e.clientX - this.x, e.clientY - this.y, 1, 1).data
            let highTemp = this.bsr.high_temp
            let lowTemp = this.bsr.low_temp
            this.temperature = ((highTemp - lowTemp) / 255 * imgData[0] + lowTemp).toFixed(2) + '℃'
            console.log(imgData)
        },
        changeWidth(e) {
            this.sliderChange = false
            document.documentElement.addEventListener('pointermove', this.mouseMove)
            document.documentElement.addEventListener('mouseup', this.releaseChange)
        },
        releaseChange() {
            this.sliderChange = true
            document.documentElement.removeEventListener('pointermove', this.mouseMove)
            this.oldx = 0
        },
        getImgWidth(dom) {
            this.timeInterrval = setInterval(() => {
                let rect = dom.getBoundingClientRect()
                if (rect.width !== 0) {
                    this.width = rect.width
                    this.height = rect.height
                    this.x = rect.x
                    this.y = rect.y
                    this.$refs.imgContainer.style.width = rect.width + 'px'
                    if (!this.slider) {
                        this.$refs.heatmapContainer.style.width = rect.width + 'px'
                    } else {
                        this.$refs.handle.style.left = this.$refs.heatmapContainer.style.width = rect.width / 2 + 'px'
                    }

                    this.drawImg()
                    clearInterval(this.timeInterrval)
                }
            }, 100)
        },
        prevImg() {
            if (this.currentImg <= 0) return
            --this.currentImg
        },
        nextImg() {
            if (this.currentImg >= this.images.length - 1) return
            ++this.currentImg
        }
    },
}
</script>

<style lang="scss">
#HeatMap {
    .temp-tips {
        position: fixed;
        top: 10px;
        left: 10px;
        width: 89px;
        height: 34px;
        line-height: 34px;
        text-align: center;
        background: rgba(0, 0, 0, 0.7);
        transform: translate(0, -50%);
        border-radius: 17px;
        color: #fff;
        &::before {
            content: "";
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background-color: #fff;
            position: absolute;
            top: 50%;
            left: 0;
            transform: translate(-50%, -50%);
        }
    }
    .img-container {
        height: calc(100vh - 80px);
        vertical-align: bottom;
        overflow: hidden;
        position: relative;
        margin: 0 auto;
        img {
            height: 100%;
            margin: 0 auto;
        }
    }
    .slider-handle {
        width: 4px;
        height: 100%;
        background: #fff;
        position: absolute;
        left: 50%;
        cursor: e-resize;
        z-index: 100;
        img {
            position: absolute;
            width: 54px;
            height: 32px;
            bottom: 21px;
            transform: translateX(-50%);
            cursor: e-resize;
        }
    }
    .heatmap-container {
        position: absolute;
        height: 100%;
        top: 0;
        overflow: hidden;
        .heat-img {
            position: absolute;
            top: 0;
            right: 0;
        }
    }
    .img-pages {
        max-width: 100vw;
        height: 50px;
        background: #dcdfe7;
        padding: 0 20px;
        .page-rect-handle {
            flex: 1;
            height: 6px;
            background: #bfc6d9;
        }
        .current-page {
            width: 16px;
            height: 16px;
            background: #4894ff;
            box-shadow: 0px 8px 13px 0px rgba(72, 148, 255, 0.16);
            border-radius: 50%;
        }
        .other-pages {
            width: 12px;
            height: 12px;
            background: rgba(191, 198, 217, 1);
            border-radius: 50%;
        }
        .change {
            width: 32px;
            height: 32px;
            background: rgba(220, 223, 231, 1);
            border: 1px solid rgba(72, 148, 255, 1);
            img {
                width: 11px;
                height: 11px;
            }
        }
        .page-change-arrows {
            width: 200px;
            box-sizing: border-box;
            .el-slider__runway {
                background-color: #4894ff;
            }
            .el-slider__bar {
                background-color: #bfc6d9;
            }
            .el-slider__button {
                width: 54px;
                height: 32px;
                background-image: url(../../assets/img/slider.png);
                background-size: 100% 100%;
                border-radius: 9px;
                border: none;
                &.hover {
                    transform: scale(1);
                }
            }
        }

        .page-left {
            border-radius: 8px 0px 0px 8px;
        }
        .page-right {
            border-radius: 0px 8px 8px 0px;
            border-left: 1px solid rgba(72, 148, 255, 1);
        }
    }
}
</style>