vue 画框组件的封装 ，等比例缩小图片

<template>

    <div>

    

    

    

        <div class='index' ref='cld' id='clic' style='width:100%;height:100%;'>

    

    

    

            <canvas id="canvas" :width="dwidth" :height="dheight"></canvas>

    

    

    

            <img ref='imgShow' id="imgs" :src="changbanner.landImage" :style="wid" />

    

    

    

        </div>

    

    </div>

</template>

<script>

export default {

    props: ['changbanner'],

    data() {

        return {

            // imgsPath:'img',//图片地址

            ctx: '',

            oCanvas: '',

            position: {}, //传给后台的值

            oCanvasLeft: 0,

            oCanvasTop: 0,

            dwidth: 1349, //动态宽度

            dheight: 909,

            wid: '200px',

            rate: 1,

        }

    },

    mounted() {

        var imgs = document.getElementById("imgs");

        let myCanvas = document.getElementById("canvas");

        console.log(this.changbanner, '图片');

 

        this.initCanvas()

        let _this = this;

        this.$nextTick(() => {

            this.$refs.imgShow.onload = function() {

                var clieW = _this.$refs.cld.style.width

                console.log(_this.$refs.cld, '78978979');

 

                var cliW = document.getElementById('clic')

 

                var w = cliW.clientWidth || cliW.offsetWidth;

                console.log(clieW);

                console.log(w, 'fdsfsdf');

                // 当图片比图片框小时不做任何改变

                if (_this.$refs.imgShow.width > w) {

                    console.log('5465465465465465');

                    _this.rate = w / _this.$refs.imgShow.width

                    _this.$refs.imgShow.width = w;

                    _this.$refs.imgShow.height = w * _this.$refs.imgShow.height / _this.$refs.imgShow.width;

                }

                console.log(clieW);

                this.onceWidth = _this.$refs.imgShow.width;

                this.onceHeight = _this.$refs.imgShow.height;

                console.log(this.onceWidth);

 

                myCanvas.width = this.onceWidth;

                myCanvas.height = this.onceHeight;

                console.log(myCanvas.width);

                _this.initCanvas()

            }

        });

    },

    methods: {

        clear() {

            this.ctx.clearRect(0, 0, this.oCanvas.width, this.oCanvas.height);

        },

//画线

        drawLine(x, y) {

            this.ctx.beginPath();

            this.ctx.strokeStyle = "#c00"

            this.ctx.lineWidth = 3;

            this.ctx.moveTo(0, 0);

            this.ctx.lineTo(x, y);

            this.ctx.closePath();

            this.ctx.stroke();

        },

//画框

        drawRect(x, y, w, h) {

            this.ctx.beginPath();

            this.ctx.strokeRect(x, y, w, h);

            this.ctx.closePath();

            console.log(this.rate, '456456');

//比列缩小的值

            let xx = x / this.rate;

            let yy = y / this.rate;

            let ww = w / this.rate;

            let hh = h / this.rate;

            this.position = {

                xx,

                yy,

                ww,

                hh

            };

        },

 

        initCanvas() {

 

            var _this = this

            //   获取canvas左上角坐标

            this.oCanvas = document.getElementById("canvas"),

                this.ctx = this.oCanvas.getContext("2d");

            // 绑定鼠标按下事件

            this.oCanvas.onmousedown = function mouseDown(e) {

 

                    let domToTop = _this.oCanvas.getBoundingClientRect().top

                    let domToLeft = _this.oCanvas.getBoundingClientRect().left;

 

                    console.log(domToTop, "domToTop");

                    _this.oCanvasLeft = domToLeft;

                    console.log(_this.oCanvasLeft);

                    _this.oCanvasTop = domToTop;

                    console.log(_this.oCanvasTop, 't');

 

                    _this.clear();

                    // 画线             

                    let mouseX1 = e.pageX - _this.oCanvasLeft;

                    let mouseY1 = e.pageY - _this.oCanvasTop;

 

                    _this.drawLine(mouseX1, mouseY1);

                    //   绑定鼠标移动事件，必须写在按下事件里面

                    this.onmousemove = function mousemove(ev) {

                            let mouseX2 = ev.pageX - _this.oCanvasLeft;

                            let mouseY2 = ev.pageY - _this.oCanvasTop + 40;

                            if (mouseX2 !== mouseX1 || mouseY2 !== mouseY1) {

                                _this.clear();

                                _this.drawLine(mouseX1, mouseY1);

                                _this.drawRect(mouseX1, mouseY1, mouseX2 - mouseX1, mouseY2 - mouseY1);

                            }

                        },

                        //   鼠标抬起移除鼠标移动事件

                        this.onmouseup = function mouseUp() {

                            // 传给后台的值

                            console.log(_this.position, 'saa');

                            this.onmousemove = function mousemove() {}

 

                        }

                },

                _this.clear()

            //后台传过来的值 

            let mouseX1 = 362.2079314040729;

            let mouseY1 = 164.7749196141479;

            let iw = 72;

            let ih = 146;

            _this.drawLine(mouseX1, mouseY1);

            _this.drawRect(mouseX1, mouseY1, iw, ih);

 

        }

    }

}

</script>

<style lang="" scoped>

* {

    marign: 0;

    padding: 0;

    box-size: border-box;

}

 

#index {

    border: 4px solid red;

    /* position:realtive; */

}

 

#canvas {

    z-index: 100;

    display: block;

    position: absolute;

    top: 40px;

    left: 0;

    border: 3px solid blue;

    z-index: 200

}

 

#imgs {

    position: absolute;

    top: 40px;

    left: 0

}

 

.hovImg {

    /* position: absolute;

    top: 40px; */

    width: 100px;

    height: auto;

}

 

.verImg {

    position: absolute;

    top: 40px;

    width: auto;

    height: 100%;

}

</style>