HTML5图片镜像翻转技巧分享

HTML5中实现图片镜像翻转看似只需一行CSS，实则暗藏多重技术陷阱：CSS需精准使用scaleX(-1)或scaleY(-1)而非误用scale(-1)，Canvas导出时须配合负宽/高与坐标偏移，SVG要兼顾transform与viewBox校正，而移动端触摸交互更会因视觉翻转与物理坐标的错位导致点击失准——本文直击这些易被忽视的底层细节，帮你避开从渲染异常、跨域报错到事件失效的一系列实战坑点。

用 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），必须用 手动绘制。关键在 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，否则后续绘制会被持续影响
• 注意跨域图片限制：若 src 是外链，未配 CORS 头，toDataURL() 会抛 SecurityError

SVG 的 方案适用场景

如果图片是 SVG 格式或可转为内联 SVG，用 transform="scale(-1, 1)" 包裹 或整个 是最语义化的方式。它天然支持响应式，且不影响事件坐标（点击区域仍与视觉一致）。

但注意：SVG 的坐标系默认原点在左上角，scale(-1,1) 会让图像翻转后“跑出画布”，需配合 transform="scale(-1, 1) translate(-width, 0)" 校正位置，其中 width 是图像原始宽度。

• 推荐用 viewBox 控制视口，比固定 width/height 更灵活
• 不能直接对远程 SVG 使用 再加 transform——此时 SVG 是外部资源，无法操作内部结构
• 若用