html编辑器无内置放大镜功能，需用html+css+js在网页中实现图片局部放大：须精确计算鼠标/触点在图内坐标、用px而非%设置background-position、拦截移动端touchmove、校验图片加载完成后再初始化，并严格限制镜片边界。
HTML 编辑器本身不内置放大镜功能，所谓“HTML 编辑器做放大镜”，实际是指在你用 HTML + CSS + JS 构建的网页中，为图片添加可交互的局部放大效果——不是编辑器的功能，而是你写的代码要解决的问题。
监听 mousemove 时怎么算准鼠标在图内的坐标
别直接用 e.offsetX / e.offsetY，它们在父容器有 border、padding 或 transform 时就失真；响应式布局里这几乎是常态。
- 用
container.getBoundingClientRect()拿容器左上角视口坐标 - 再用
e.clientX - rect.left和e.clientY - rect.top得到鼠标在容器内的像素位置 - 减去
parseFloat(getComputedStyle(container).paddingLeft)和borderLeftWidth才是真实图内坐标 - 最后用这个坐标除以
img.naturalWidth/img.naturalHeight归一化，避免缩放后错位
background-position 为什么必须用 px 而不能用 %
写 background-position: 50% 50% 只能让高清图固定居中；而放大镜要求“鼠标指哪，镜片就放大哪”，百分比在 background-size 不是 cover、或容器宽高动态变化时会漂移——尤其在移动端横竖屏切换、浏览器缩放后，镜片直接偏出画面。
- 设
background-size: 1200px 900px（即高清图原始尺寸） - 再算
background-position: -x * scale + "px" + " " + -y * scale + "px" - 这样映射是线性的，无论容器多宽、缩放多少倍，坐标关系都不变
移动端 touchmove 怎么防止页面滚动并取对坐标
iOS Safari 和 Android Chrome 默认把 touchmove 当成滚动事件，不拦截就会卡顿、跳转，镜片一闪就消失。
- 给镜片容器加
touch-action: none -
touchstart和touchmove回调第一行必须写e.preventDefault()，只在touchstart绑一次不够 - 取触点用
e.touches[0].clientX，别用changedTouches（它可能为空） - 加个开关变量如
isTouching = true，在touchstart后临时解绑mousemove，避免双端事件打架
高清图还没加载完就初始化，镜片为什么一片空白
很多代码一加载就绑 mousemove，但此时 img.naturalWidth 是 0，scale 算出来是 NaN，background-position 设成 NaNpx NaNpx，浏览器直接忽略样式。
-
img.onload在缓存命中时不触发，光等它等于白等 - 必须先检查
img.complete === true，再立刻读naturalWidth - 稳妥做法：同时监听
load事件，并在脚本执行时立即判断complete，两者覆盖所有加载路径 - 初始化逻辑（比如计算
scale、绑定事件）一定要放在这个双重校验之后
最容易被忽略的是：镜片位置和背景偏移的边界限制必须独立计算——容器坐标、图片自然尺寸、高清图尺寸、镜片大小、缩放倍数，五者稍有不匹配，就会出现黑边、留白或镜片飞出。这不是“差不多就行”的事，每个值都得带单位、带校验、带 Math.max(0, Math.min(...)) 套一层。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
