用CSS transform实现图片镜像需用scaleX(-1)或scaleY(-1)，避免误用scale(-1)；Canvas需负宽/高配合drawImage；SVG用scale(-1,1)并校正位置；移动端需手动换算触摸坐标。
用 CSS transform 实现图片水平/垂直镜像
HTML5 本身不提供原生“镜像”API，实际靠 CSS 的 transform 完成。核心是 scaleX(-1)（水平翻转）或 scaleY(-1)（垂直翻转），它不会改变 DOM 结构，只影响渲染层，性能好、兼容性佳（IE9+ 支持）。
常见错误是直接写 transform: scale(-1) —— 这会同时翻转 X 和 Y，导致图片倒置且左右翻转，像被旋转了180°，不是纯镜像。
- 仅水平镜像：
transform: scaleX(-1) - 仅垂直镜像：
transform: scaleY(-1) - 若需保持定位不变，建议加
transform-origin: center避免因缩放中心偏移造成位置跳动 - 注意：镜像后文字也会反向，如需保留可单独对子元素再
scaleX(-1)反向矫正
Canvas 中 drawImage 配合负宽/高实现像素级翻转
当需要导出镜像后的图片数据（比如保存为 PNG），必须用 <canvas> 手动绘制。关键在 drawImage() 的参数顺序和符号：传入负的 width 或 height 即可触发翻转。
例如水平镜像：原图宽 200px，调用 ctx.drawImage(img, 0, 0, -200, 100, 200, 0, 200, 100) —— 第四参数 -200 表示以 X 轴为对称轴拉伸并翻转；目标区域从 x=200 开始画，避免图像重叠到原位置。
立即学习“前端免费学习笔记（深入）”；
- 水平翻转：源宽设为负值，目标 x 坐标要 + |源宽|，否则图像会画在 canvas 左侧外
- 垂直翻转：源高设为负值，目标 y 坐标要 + |源高|
- 必须先设置
ctx.save()/ctx.restore()或重置transform，否则后续绘制会被持续影响 - 注意跨域图片限制：若
<img>src 是外链，未配 CORS 头，toDataURL()会抛SecurityError
SVG 的 <g transform="scale(-1, 1)"> 方案适用场景
如果图片是 SVG 格式或可转为内联 SVG，用 transform="scale(-1, 1)" 包裹 <image> 或整个 <g> 是最语义化的方式。它天然支持响应式，且不影响事件坐标（点击区域仍与视觉一致）。
但注意：SVG 的坐标系默认原点在左上角，scale(-1,1) 会让图像翻转后“跑出画布”，需配合 transform="scale(-1, 1) translate(-width, 0)" 校正位置，其中 width 是图像原始宽度。
- 推荐用
viewBox控制视口，比固定width/height更灵活 - 不能直接对远程 SVG 使用
<img src="xxx.svg">再加 transform——此时 SVG 是外部资源，无法操作内部结构 - 若用
<object>或内联，才可对内部元素加 transform
移动端 touch 交互中镜像后事件坐标错位问题
用 CSS scaleX(-1) 翻转后，touchstart 的 clientX 仍是物理屏幕坐标，但视觉上按钮已左右颠倒，导致“点左边实际触发右边”。这不是 bug，而是浏览器未自动映射变换后的坐标系。
- 解决办法：监听事件时手动换算，如水平镜像下，真实点击 X 坐标 ≈ 元素右边界 − (event.clientX − 元素左边界)
- 更稳妥的是改用
getBoundingClientRect()动态计算，而非依赖静态 offset - 避免对整个页面根元素做
scaleX(-1)，否则所有交互逻辑都要重写坐标逻辑 - 如只是 UI 层镜像（比如相机预览），优先用
video.style.transform = 'scaleX(-1)'并禁用其上的点击，把交互层（按钮等）放在独立容器里
