图片放大镜功能

思路：在图片上面放置一层透明canvas，监听鼠标移入移出事件，移入时根据设置的放大倍数实时绘制canvas，移出时清空canvas

实现：本文中使用到了canvas、vue

一、页面结构

<canvas class="img-over img" ref="canvas" @mousemove="enlargePic" @mouseout="endLarge"></canvas>
<img class="img" :src="img" ref="pic" v-if="showPic" />

//css
.img {
    height: 20rem;
    width: 30rem;
}
.img-over {
     z-index: 4;
}

通过设置z-index实现透明canvas覆盖在图片上面

二、data设置

data() {
        return {
            imgScale: 1.1, //放大倍数
            img:'url',  //图片路径
            showPic: true,  //控制图片显示，移入时显示canvas而不显示图片
            ctx: null   //canvas句柄，移入时将他设置，移出时将他清空
        };
    }

三、函数

        /*当鼠标移入时触发*/
        enlargePic(e) {
            this.showPic = false;   //图片隐藏
            let pic = new Image();  //新建Image对象pic
            pic.src = this.img;   //将img拷贝至pic，这样做能优化运算速度
            let canvas = this.$refs.canvas; //获取页面canvas元素
            this.ctx = canvas.getContext('2d'); //新建2d绘图
            //初始化，将绘图清空，避免历史残留图像造成影响
            this.ctx.clearRect(0, 0, canvas.width, canvas.height);
            //将用户点击时的页面坐标，转化成canvas内部坐标
            //canvas.getBoundingClientRect()能够取到canvas距离页面边距的left等值
            let coordInCanvas = {
                x: e.clientX - canvas.getBoundingClientRect().left,
                y: e.clientY - canvas.getBoundingClientRect().top
            };
            /*对canva进行放大处理，newSize指图片显示的部分区域，区域变小，
              但尺寸不变，图片就会呈现放大效果*/
            let newSize = {
                width: canvas.width / this.imgScale,
                height: canvas.height / this.imgScale
            };
            //以用户鼠标为中心，以新尺寸，确定新的绘图起点
            let newX = coordInCanvas.x - newSize.width / 2;
            let newY = coordInCanvas.y - newSize.height / 2;
            //在图片中截取一个区域覆盖原图片
            this.ctx.drawImage(
                pic,
                newX,
                newY,
                newSize.width,
                newSize.height,
                0,
                0,
                canvas.width,
                canvas.height
            );
        },

         /*当鼠标移出时触发*/
        endLarge() {
             //获取页面canvas元素
            let canvas = this.$refs.canvas;
             //擦除canvas
            this.ctx.clearRect(0, 0, canvas.width, canvas.height);
             //显示原始图片
            this.showPic = true;
        },

图片放大镜功能完成