js自制图片放大镜功能

下面是关于“js自制图片放大镜功能”的完整攻略。

需求分析

在网站中，我们经常需要实现图片放大功能，而放大镜效果是一种常见的实现方式。放大镜会在鼠标悬浮在图片上时，弹出一个局部放大的镜头，帮助用户更方便的查看细节。

整体思路

下面是实现放大镜效果的整体思路：

1. 将要放大的图片进行裁剪，获得两份图片，一份是缩略图，一份是原图。
2. 将缩略图和放大镜框上传到网站上。
3. 初始化页面，给展示缩略图的区域绑定鼠标移动事件。
4. 鼠标移动时，在缩略图上显示一个透明的放大镜框，并且根据鼠标移动的位置，计算出对应的位置在原图上的坐标。
5. 根据计算出的原图上的坐标，在原图区域上显示一份对应的局部放大图。
6. 当鼠标移出缩略图区域时，放大镜框和局部放大图都需要隐藏。

具体实现

下面是具体实现的过程：

1. 将要展示的图片进行裁剪，得到缩略图和原图

```
// 1.1. 首先获取需要展示的图片
const img = document.querySelector('.product-detail__img img')

// 1.2. 获取图片的原始大小
const naturalWidth = img.naturalWidth
const naturalHeight = img.naturalHeight

// 1.3. 计算出图片的中心点
const centerX = naturalWidth / 2
const centerY = naturalHeight / 2

// 1.4. 计算出需要裁剪出来的位置和大小
const thumbnailSize = 150
const clipX = centerX - thumbnailSize / 2
const clipY = centerY - thumbnailSize / 2
const clipWidth = thumbnailSize
const clipHeight = thumbnailSize

// 1.5. 使用canvas裁剪出缩略图和原图
const canvas = document.createElement('canvas')
canvas.width = clipWidth
canvas.height = clipHeight

const ctx = canvas.getContext('2d')
ctx.drawImage(img, -clipX, -clipY, naturalWidth, naturalHeight)

const thumbnail = canvas.toDataURL()

canvas.width = naturalWidth
canvas.height = naturalHeight

ctx.drawImage(img, 0, 0, naturalWidth, naturalHeight)

const original = canvas.toDataURL()

// 1.6. 将缩略图和原图上传到服务器或者存储到本地
```

1. HTML布局

```

```

1. JS代码

```
const thumbnail = document.querySelector('.product-detail__thumbnail')
const thumbnailImg = thumbnail.querySelector('img')
const magnifier = thumbnail.querySelector('.product-detail__magnifier')

const original = document.querySelector('.product-detail__original')
const originalImg = original.querySelector('img')

const handleMouseMove = event => {
const rect = thumbnail.getBoundingClientRect()
const offsetX = event.clientX - rect.left
const offsetY = event.clientY - rect.top

 const magnifierSize = 150
 const magnifierX = Math.max(0, Math.min(thumbnail.offsetWidth - magnifierSize, offsetX - magnifierSize / 2))
 const magnifierY = Math.max(0, Math.min(thumbnail.offsetHeight - magnifierSize, offsetY - magnifierSize / 2))

 magnifier.style.left = magnifierX + 'px'
 magnifier.style.top = magnifierY + 'px'

 const scale = originalImg.naturalWidth / thumbnailImg.offsetWidth

 original.style.backgroundPosition = `-${magnifierX * scale}px -${magnifierY * scale}px`

 magnifier.style.display = 'block'
 original.style.display = 'block'

}

const handleMouseLeave = event => {
magnifier.style.display = 'none'
original.style.display = 'none'
}

thumbnail.addEventListener('mousemove', handleMouseMove)
thumbnail.addEventListener('mouseleave', handleMouseLeave)
```

示例说明

这里提供两个关于实现放大镜功能的示例：

示例一

中寻花园荟的“小程序”页面，实现了商品图片的放大和查看功能。用户可以通过手势控制图片的缩放和移动，查看商品的细节。具体的流程如下：

1. 在网页中设置要显示的大图片的路径，生成缩略图，并将缩略图保存在图片服务器中。
2. 启动微信内置的图片浏览器，将缩略图的路径传入，达到快速浏览效果。
3. 在放大镜的实现上，利用小程序框架提供的移动手势监听事件以及图片的scale和translate，实现手势缩放和移动。

因此，对于一张较大的商品图片，可以通过以上三个步骤达到快速浏览和放大查看的效果。

示例二

某电商网站“商品详情页”的图片放大效果，采用了独立开发方式实现。选中商品时，通过Ajax请求获取商品的详细信息，包括商品的缩略图和原图的地址。当鼠标移动到缩略图上时，获取鼠标在缩略图中的位置，并显示一个透明的放大镜框。根据鼠标在缩略图中的位置计算出在原图上的坐标，并在原图区域上显示一个具有相应大小的局部放大图。鼠标离开缩略图则隐藏放大镜和局部放大图。此外，为了避免过度频繁地请求图片，该功能还实现了缓存机制，在第一次加载图片后，将对应的图片保存在浏览器缓存中，下次再需要时则可以直接从浏览器缓存中读取，提高了效率。