纯css的hover+scale无法实现商品级放大镜，因只整体放大、不支持局部聚焦；真需求须用js动态映射坐标，处理图片加载、坐标换算、raf节流、边界限制与内存清理。
纯 CSS 的 hover + transform: scale() 不能实现商品级放大镜效果——它只放大整张图，不支持“鼠标指哪看哪”的局部高倍聚焦。真需求必须用 JavaScript 动态映射坐标。
为什么 transform: scale() 在商品图上基本没用
很多人加了 .img:hover { transform: scale(2); } 就以为搞定了，结果发现：
- 图片整体放大后溢出容器，边缘被裁掉，用户根本看不到想看的细节
- 鼠标悬停位置和放大的区域完全无关——你指在左下角，放大的却是中心
- 移动端没有
:hover，touch 事件不会触发，功能直接失效 - 缩放后所有像素被等比拉伸，1200×900 的原图缩放到 2400×1800 会模糊，不是“看清”，是“糊成一片”
drawImage() 报 Failed to execute 'drawImage': The image argument is null 怎么办
这个错误几乎总发生在图片还没加载完就调用了绘制逻辑。光绑 img.onload 不够，缓存命中时它根本不触发。
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 必须先监听
load事件，再立即检查img.complete === true - 两者缺一不可，否则首屏或刷新后必报错
- 绘图前加守卫：
if (!img.complete || !img.naturalWidth) return; -
drawImage()第 1 个参数是image，后 8 个是坐标：前 4 个(sx, sy, sWidth, sHeight)是从原图裁哪块，后 4 个(dx, dy, dWidth, dHeight)是画到 canvas 哪里、画多大
鼠标坐标怎么转成高清图上的真实像素点
显示尺寸（如 300×300px）和原始分辨率（如 img.naturalWidth = 1200）差 4 倍，少这步换算，放大镜永远偏移。
- 用
getBoundingClientRect()获取图片左上角视口坐标，再减去e.clientX / e.clientY得到鼠标相对图片的x, y - 真实裁剪起点：
Math.round(x * (img.naturalWidth / img.width))，y同理 - 裁剪宽高建议固定（如
60×60），目标 canvas 设为240×240→ 实现 4 倍放大；超过 5 倍，除非原图超大，否则边缘明显糊 - 务必用
Math.max(0, Math.min(...))限制裁剪起点，防止越界读取空白像素
mousemove 频繁触发导致卡顿怎么压
每移动 1px 就重绘一次 canvas，低端机或大图下直接掉帧——这不是代码慢，是没节流。
- 绝对不要在
mousemove回调里直接调drawImage() - 改用
requestAnimationFrame：标记“需更新”，由 raf 统一执行 - 放大镜 canvas 尺寸别超过
300×300；尺寸翻倍，纹理上传开销接近四倍增长 - 如果图片来自
URL.createObjectURL()，绘制完成后必须调URL.revokeObjectURL()，否则内存泄漏 - 移动端要监听
touchmove并取touches[0]，changedTouches在快速滑动中可能为空
真正难的不是写几行 JS，而是把 naturalWidth / width 换算、raf 节流、边界 clamp、内存清理这几处全做对。漏一个，上线后就是“有时能用，有时白屏，有时卡死”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
