商品图片放大镜需精准映射鼠标到高清图坐标，核心是用naturalWidth/width换算偏移、drawImage前校验img.complete、raf节流重绘，并限制裁剪边界防越界。
商品图片放大镜不是加个 transform: scale() 就能用的——它必须精准映射鼠标位置到高清图坐标，否则放大的永远是错的区域。
canvas.drawImag() 的 9 个参数怎么填才不报错
这是最常卡住人的地方：Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The image argument is null。错误不是因为代码写错了，而是 img 还没加载完就调用了绘制。
- 必须先检查
img.complete === true，不能只靠img.onload绑定——缓存命中时onload根本不触发 - 更稳妥写法：先监听
load，再立即判断complete，两者都覆盖 -
drawImage()第 1 个参数是image，后 8 个是坐标和尺寸：前 4 个（sx, sy, sWidth, sHeight）定义从原图裁哪一块；后 4 个（dx, dy, dWidth, dHeight）定义画到 canvas 哪里、画多大 - 注意
sx/sy是像素坐标，得用img.naturalWidth / img.width换算缩放比，不能直接用显示宽高
鼠标坐标转高清图坐标的换算陷阱
显示在页面上的 <img> 宽高可能是 300×300，但 img.naturalWidth 是 1200×900——少这一步换算，放大镜就永远偏移。
- 用
getBoundingClientRect()获取图片左上角在视口中的位置，再减去e.clientX/e.clientY得到鼠标相对图片的偏移x, y - 真实裁剪起点 =
Math.round(x * (img.naturalWidth / img.width))，y同理 - 裁剪区域大小建议固定（如 60×60 像素），目标 canvas 大小设为 240×240 → 实现 4 倍放大；超过 5 倍，除非原图分辨率极高，否则边缘明显模糊
- 别忘了用
Math.max和Math.min限制裁剪起点，防止越界读取空白像素
mousemove 频繁重绘导致卡顿怎么办
每移动 1px 就调一次 drawImage()，低端设备或大图下会掉帧——这不是性能差，是没节流。
立即学习“前端免费学习笔记（深入）”；
- 绝对不要在
mousemove回调里直接绘制；改用requestAnimationFrame节流：标记“需更新”，由 raf 统一执行 - 放大镜 canvas 尺寸别超过 300×300；尺寸越大，每次纹理上传开销指数级上升
- 如果图片来自本地文件（
URL.createObjectURL()），绘制完成后必须调用URL.revokeObjectURL()，否则内存泄漏 - 移动端要监听
touchmove并取touches[0]，changedTouches在快速滑动中可能为空
CSS 方案为什么不适合商品图
纯 CSS 的 background-position + background-size 看起来简单，但对商品图几乎不可用。
- 要求原图尺寸 ≥ 容器尺寸 × 放大倍数，否则拉伸失真；而电商图常需 3–5 倍放大，高清图动辄 4000×3000，加载慢且浪费带宽
-
background-position只支持百分比或像素值，无法做到亚像素精度映射，鼠标稍快就“跳帧” - 不支持透明通道精细控制，PNG 商品图边缘容易发虚；也无法做平滑缩放动画，
transform: scale()是整体放大，不是“镜下局部” - 无法响应双击切换倍率、拖拽移动视窗等电商必需交互
真正难的不是画出放大效果，而是让每一次鼠标移动都对应到高清图里精确的 1×1 像素区域——坐标换算错 1 像素，用户看到的就是完全不同的织物纹理或标签文字。
