HTML5无内置放大镜组件，需用canvas或CSS+JS模拟：canvas方案通过drawImage裁剪放大原图局部并实时重绘，关键在坐标换算与图像加载校验；CSS方案用background-position移动视口，适合静态大图但精度低。
HTML5 本身没有内置“放大镜”组件，所谓放大镜效果是用 canvas 或 CSS + JavaScript 模拟实现的视觉交互，核心在于实时截取原图局部、等比放大并跟随鼠标定位。直接用纯 HTML 标签或单靠 CSS 是做不到真正动态缩放的。
用 canvas 实现高保真放大（推荐）
这是最可控的方式：把原图绘制到隐藏 canvas，再按鼠标位置裁剪目标区域，放大后画到可见 canvas 上。关键点是坐标换算和图像重绘频率。
-
canvas的drawImage()要传 9 个参数：源图 x/y/width/height + 目标 canvas x/y/width/height - 鼠标坐标需通过
getBoundingClientRect()转为相对于图片左上角的偏移，再映射到原图像素坐标（注意img.naturalWidth和显示宽高的区别） - 放大倍数建议控制在 2–5 倍之间；超过 5 倍易出现模糊，除非原图分辨率极高
- 每次
mousemove都要清空目标canvas并重绘，否则会残留旧帧
CSS + background-position 模拟（轻量但有局限）
适合静态大图、对精度要求不高的场景。原理是把原图设为大容器的背景图，用 background-size: cover 配合 background-position 移动视口。
- 必须确保原图尺寸 ≥ 容器尺寸 × 放大倍数，否则拉伸失真
- 鼠标位置需转换为百分比值传给
background-position，公式：`${(x / imgWidth) * 100}% ${(y / imgHeight) * 100}%` - 无法做平滑缩放动画，
transform: scale()会整体放大整个容器，不是“镜下局部放大” - 不支持透明通道精细控制，PNG 边缘可能发虚
常见报错：Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The image argument is null
这是最常卡住新手的问题：img 对象还没加载完成就调用了 drawImage()。不能只靠 onload 绑定——如果图片已缓存，onload 可能不触发。
立即学习“前端免费学习笔记（深入）”；
- 务必检查
img.complete === true，再决定是否立即绘制 - 更稳妥写法：先监听
load，再手动判断complete，两者都覆盖 - 若用
URL.createObjectURL()加载本地文件，记得在绘制完成后调用URL.revokeObjectURL()防内存泄漏
真正的难点不在代码行数，而在于坐标系对齐：浏览器渲染、CSS 布局、图像原始像素、canvas 像素这四者单位不统一，稍有偏差就会导致镜中画面偏移或抖动。调试时建议先固定一个点（比如图片中心），确认该点放大后是否精确居中，再放开鼠标跟踪。
