水平镜像 = 左右对调(最常用,相当于自拍镜像);垂直翻转 = 上下颠倒;双向 = 旋转 180° 的效果。
原图有透明背景就选 PNG,其余场景 JPEG / WebP 更省空间。
选张图,选个方向,一键镜像翻转。
看起来只是一句 ctx.scale(-1, 1) 的事,但用错方向会越翻越乱。
| 方式 | 等效说法 | 典型场景 | 注意事项 |
|---|---|---|---|
| 水平镜像 | 左右对调 / 照镜子 | 自拍还原真实视角、把朝左的箭头改成朝右、对称构图 | 画面里的文字会变成反的,有字务必先想清楚 |
| 垂直翻转 | 上下颠倒 / 倒影 | 做水面倒影、纠正上下颠倒的扫描件、做对称海报 | 人像倒过来会非常怪,一般只用于素材 |
| 双向翻转 | 旋转 180° | 修正倒置照片、做中心对称图案 | 与「旋转 180°」结果一致,但不会改变画布宽高 |
翻转是像素级操作,不会重新采样,画质零损失——但下面三件事会翻车。
| 坑 | 会怎样 | 怎么避免 |
|---|---|---|
| 图里有文字 | 字变成镜像,完全读不了 | 只翻转无文字的照片;有字的话先把字裁掉或改用旋转 |
| 选了 JPEG 但原图有透明 | 透明区被填成白色 | 带透明的 PNG / WebP 素材请选 PNG 输出 |
| 超大图一次选几十张 | 浏览器内存吃紧,可能卡住 | 单批控制在 20 张以内,或先压缩到 2000px 再翻 |
⚠️ 免责声明:翻转后画面中的文字、logo、方向性元素都会变成镜像,请确认后再使用。
本工具仅做像素级镜像,不会压缩画质,但导出为 JPEG 属于有损压缩,会引入轻微噪点。
所有处理在你的浏览器本地完成,图片不会上传到任何服务器。
手机相册自带编辑里其实都有「镜像」按钮,但它是直接改原图的,一不小心就存坏了;用 PS 又太重,就为了翻个方向开个软件不值当。
这个工具就干一件事:把图按你要的方向翻过来,然后原封不动地还给你。
它是怎么翻的?
① 读入原图像素:用浏览器把图片解码成 canvas,拿到真实宽高(不是显示宽高);
② 画布坐标取反:水平镜像就是把画布的横坐标 scale(-1, 1),垂直翻转是 scale(1, -1),双向就是两个一起取反;
③ 平移补偿:取反之后图像会跑到画布外面,所以要再 translate(宽, 0) 或 translate(0, 高) 把它推回来;
④ 按原尺寸导出:画布尺寸与原图完全一致,不做缩放、不重新采样,画质零损失。
三种方式怎么选:
· 水平镜像:左右对调,自拍还原、箭头换向、对称构图,90% 的需求都是它;
· 垂直翻转:上下颠倒,主要用来做倒影和纠正扫反的图;
· 双向翻转:等效于旋转 180°,但不交换宽高,横图翻完还是横图。
可以一次选多张批量翻,处理完在结果区逐张预览,单张下载或打包 ZIP。
整个流程都在你自己的浏览器里跑,照片不会上传到任何服务器。
怎么翻:
① 图片解码进 canvas,取 naturalWidth / naturalHeight 作为画布尺寸;
② 按方向设置变换矩阵:水平 scale(-1,1) + translate(-w,0)、垂直 scale(1,-1) + translate(0,-h)、双向 scale(-1,-1) + translate(-w,-h);
③ drawImage 一次性画完,不做任何缩放;
④ 按选定格式 toBlob 导出(JPEG 质量 0.92);
⑤ 多张时逐张串行处理,实时更新进度,结果区网格预览。
它不做:不加水印、不裁剪、不调整分辨率、不做内容识别。带文字的图片翻转后会变成镜像,请先确认。
审核通过后就会展示在留言板上,稍安勿躁~
还没有留言,来抢沙发吧!