div/canvas实现放大镜、图片局部放大效果

放大镜、图片局部放大效果"/>

div/canvas实现放大镜、图片局部放大效果

放大镜效果实现

放大图片的需求，一般是在原有的渲染之上，额外添加一个放大框，当鼠标在原图上移动，放大框内就以当前的鼠标为中心，局部放大一定范围，在淘宝商城中是常有的实现。下面将用两种实现。

1、使用div + img 标签，原理是放大框中有一个图片，这个图片是放大后的，放大框大小固定，图片超出的部分隐层overflow: hidden，只需要调整图片的位置即可

2、使用两个canvas 其中一个用于渲染原图，另外一个做放大框，通过找到鼠标在原图位置，再选择出需要放大的范围，通过canvas方法渲染到放大框中

原图：这个可以下载下来去测试代码

效果图: 红色框是手动标注，如果需要可以额外实现，左边的框是原图，右边的框是放大后的图，这里放大的倍数 代码里面抽离出去用一个变量zoom 控制，免得难缠的产品经理对放大的大小有意见，切来切去也方便

1、div img实现放大镜

1. 初始化：初始化放大倍数zoom、原图canvas1、放大图canvas2

2. 加载图片：引入放大的图片，在图片加载成功后获取宽高，依次设置原图canvas1宽高并渲染、放大图canvas2宽高、鼠标监听事件

3. 开始监听：监听鼠标在原图canvas1中的相对于左上角的位置，再计算出需要放大的范围，在放大图canvas2中渲染，注意每次渲染新的放大图要把画布清空，否则在边界的时候会出现重影

4. 效果图：

// html<canvas id="canvas1"></canvas><canvas id="canvas2" style="background: #eee;"></canvas>

// js// 1、初始化let zoom = 2let canvas1 = document.querySelector("#canvas1");let ctx1 = canvas1.getContext("2d");let canvas2 = document.querySelector("#canvas2");let ctx2 = canvas2.getContext("2d");// 2、加载图片let img = new Image();img.src = "./good.png";img.onload = () => {let { width, height } = img//设置原图 canvas1.width = widthcanvas1.height = heightctx1.drawImage(img, 0, 0, width, height);// 设置放大图canvas2.width = widthcanvas2.height = height// 开起鼠标监听，移动的时候放大图片canvas1.addEventListener("mousemove", mouseHandler)}// 3、放大图片function mouseHandler(e) {let x = e.clientXlet y = e.clientY// 每次清空整个画布let { width, height } = canvas2ctx2.clearRect(0, 0, canvas2.width, canvas2.height);ctx2.drawImage(img, x-width/2/zoom, y-height/2/zoom, width/zoom, height/zoom, 0, 0, width, height);// 第1个参数 确定原图// 第2、3个参数 确定鼠标所在放大范围左上角// 第4、5个参数 确定裁剪的大小，为放大范围// 第6、7、8、9个参数 确定绘制的位置和大小}

2、canvas 实现放大镜

1. 初始化：初始化放大倍数zoom、原图img1、放大图盒子img2Box、放大图img2

2. 加载图片：获取图片的大小后，设置dom大小，开起鼠标监听

3. 放大图片：通过放大倍数计算放大的范围，计算相对位置移动放大图到指定位置

4. 效果图：

//html<img id="img1" src="./good.png" alt=""><div id="img2-box"><img id="img2" src="./good.png" alt=""></div>

//js// 1、初始化let zoom = 3let img1 = document.querySelector("#img1");let img2Box = document.querySelector("#img2-box");let img2 = document.querySelector("#img2");// 2、加载图片let img = new Image();img.src = "./good.png";img.onload = () => {let { width, height } = imgimg1.width = widthimg1.height = heightimg2Box.style.width = widthimg2Box.style.height = heightimg2.width = width * zoomimg2.height = height * zoom// 开起鼠标监听，移动的时候放大图片img1.addEventListener("mousemove", mouseHandler)}// 3、放大图片function mouseHandler(e) {let { width, height } = imglet x = e.clientXlet y = e.clientYimg2.style.left = -x*zoom + width/2img2.style.top = -y*zoom + height/2}