|
放大镜效果实现
放大图片的需求，一般是在原有的渲染之上，额外添加一个放大框，当鼠标在原图上移动，放大框内就以当前的鼠标为中心，局部放大一定范围，在淘宝商城中是常有的实现。下面将用两种实现。
1、使用div + img 标签，原理是放大框中有一个图片，这个图片是放大后的，放大框大小固定，图片超出的部分隐层overflow: hidden，只需要调整图片的位置即可
2、使用两个canvas 其中一个用于渲染原图，另外一个做放大框，通过找到鼠标在原图位置，再选择出需要放大的范围，通过canvas方法渲染到放大框中
原图：这个可以下载下来去测试代码
效果图: 红色框是手动标注，如果需要可以额外实现，左边的框是原图，右边的框是放大后的图，这里放大的倍数 代码里面抽离出去用一个变量zoom 控制，免得难缠的产品经理对放大的大小有意见，切来切去也方便
1、div img实现放大镜
初始化：初始化放大倍数zoom、原图canvas1、放大图canvas2 加载图片：引入放大的图片，在图片加载成功后获取宽高，依次设置原图canvas1宽高并渲染、放大图canvas2宽高、鼠标监听事件 开始监听：监听鼠标在原图canvas1中的相对于左上角的位置，再计算出需要放大的范围，在放大图canvas2中渲染，注意每次渲染新的放大图要把画布清空，否则在边界的时候会出现重影 效果图：
// html
// 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 实现放大镜
初始化：初始化放大倍数zoom、原图img1、放大图盒子img2Box、放大图img2 加载图片：获取图片的大小后，设置dom大小，开起鼠标监听 放大图片：通过放大倍数计算放大的范围，计算相对位置移动放大图到指定位置 效果图：
//html
//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
}
|