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 = 2
  let 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 = width
    canvas1.height = height
    ctx1.drawImage(img, 0, 0, width, height);
    // 设置放大图
    canvas2.width = width
    canvas2.height = height
    // 开起鼠标监听，移动的时候放大图片
    canvas1.addEventListener("mousemove", mouseHandler)
  }

  // 3、放大图片
  function mouseHandler(e) {
    let x = e.clientX
    let y = e.clientY
    // 每次清空整个画布
    let { width, height } = canvas2
    ctx2.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 = 3
  let 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 } = img
    img1.width = width
    img1.height = height
    img2Box.style.width = width
    img2Box.style.height = height
    img2.width = width * zoom
    img2.height = height * zoom
    // 开起鼠标监听，移动的时候放大图片
    img1.addEventListener("mousemove", mouseHandler)
  }

  // 3、放大图片
  function mouseHandler(e) {
    let { width, height } = img
    let x = e.clientX
    let y = e.clientY
    img2.style.left = -x*zoom + width/2
    img2.style.top = -y*zoom + height/2
  }

代码007普通

打赏 收藏 海报 链接