<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','hkkkk'],     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 =Math.floor (x / this.rate);             let yy =Math.floor (y / this.rate);             let ww =Math.floor (w / this.rate);             let hh =Math.floor (h / this.rate);             let bili = this.rate;             this.position = {                 bili,                 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 ;                             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.$emit('qigemingzi',_this.position);                             console.log(333);
                        }                 },                 _this.clear()             //后台传过来的值              let mouseX1 = this.hkkkk.xx*this.rate;             let mouseY1 = this.hkkkk.yy*this.rate;             let iw = this.hkkkk.ww*this.rate;             let ih = this.hkkkk.hh*this.rate;             _this.drawLine(mouseX1, mouseY1);             _this.drawRect(mouseX1, mouseY1, iw, ih);
        }     } } </script>    <style lang="" scoped> #index {     border: 4px solid red;     /* position:realtive; */ }
#canvas {     z-index: 100;     display: block;     position: relative;     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>