复古图片转换器

用 canvas 逐像素把彩色照片压进暖色子空间:按 Microsoft 口径的三行系数矩阵重算 RGB,再叠加降饱和、颗粒噪点与暗角。三行系数之和分别是 1.351、1.203、0.937,前两行都大于 1,不做截断就会溢出——纯白会被算成 (344.505, 306.765, 238.935),截断后是 (255, 255, 239) 的暖白。全部在本地完成,图片不会上传。

三行系数之和是 1.351、1.203、0.937:前两行大于 1,纯白会被算到 344.505 与 306.765,截断后留下 (255, 255, 239) 的暖白。
色值试算(sepia 矩阵): (255,255,255) → (344.505, 306.765, 238.935) → (255,255,239) 溢出 (89.505, 51.765, 0) (128,128,128) → (172.928, 153.984, 119.936) → (173,154,120) 溢出 (0, 0, 0) (255,0,0) → (100.215, 88.995, 69.36) → (100,89,69) 溢出 (0, 0, 0) (0,0,255) → (48.195, 42.84, 33.405) → (48,43,33) 溢出 (0, 0, 0) (0,0,0) → (0, 0, 0) → (0,0,0) 溢出 (0, 0, 0)

原图:尚未加载

复古效果:尚未处理

处理全部在本浏览器完成,图片不上传;点「下载 PNG」把右侧画布存成文件。

使用方法

  1. 「选择图片」挑一张本地图片,支持 jpg、png、webp、gif,上限 12 MB 与 800 万像素。选好后自动处理,不需要额外点按钮。
  2. 「复古强度」默认 100,范围 0 到 100,步长 1。它决定原色与 sepia 结果的混合比例:0 是原图,100 是完整 sepia。
  3. 「降饱和」默认 30,范围 0 到 100,步长 1。它在 sepia 之后把颜色朝 Rec.601 亮度拉,数值越大越接近灰调暖色。
  4. 「颗粒噪点」默认 12,「暗角」默认 25,范围都是 0 到 100,步长 1。噪点给每个像素加一个随机偏移,暗角按到中心的距离压暗四周。
  5. 「色值试算」不依赖图片:每行写一组 R,G,B,按 Ctrl+Enter(Mac 上 Cmd+Enter)或点「试算色值」,直接看 sepia 矩阵对这个色的作用,包括未截断值与溢出量。
  6. 下方并排两张画布,左边是原图,右边是处理后的效果,下面分别标注尺寸、像素数与本次的乘加次数。
  7. 「下载 PNG」把右侧画布存成文件;「复制表格」复制试算表的制表符版本;「恢复默认参数」把四个滑杆调回 100、30、12、25。
  8. 没选图片就点处理、选了非图片文件、文件超过 12 MB、像素超过 800 万、图片解码失败、某个数值越界、试算行格式写错,都会给出写明原因的提示。

这个复古图片转换器能解决什么问题

把彩色照片做成复古调,常见的误解是「复古等于变黄」。真正让一张照片看起来像旧照片的,是好几件事叠在一起:降饱和、偏暖的色调映射、降对比,再加上可选的颗粒噪点与暗角。sepia 只是其中一步,它是把彩色投影到一个固定的暖色子空间:饱和度被压掉、色相被拉向橙黄,但亮度大体保留。

第一类是把现代照片统一成同一种调子。一组拍摄于不同时间、白平衡各异的照片,逐张手调很难调一致;套同一个 sepia 矩阵再配同一组强度参数,色调立刻统一,这一步常用来拼接图或做时间线。

第二类是做旧与做氛围。老照片的观感来自低饱和加暖偏色,再叠一点颗粒与暗角模拟胶片与镜头的物理特性。本页把这几项拆成独立参数,可以只用其中一部分,例如只加暗角不动色相。

第三类是压掉杂色。屏幕截图、扫描件里常有一些刺眼的高饱和色块,降饱和加暖色映射能把它们压成同一色系,让主体更突出;这在做封面与配图时很有用。

第四类是核对颜色计算。设计师给出一组目标色,需要知道经过 sepia 之后会变成什么,本页的色值试算直接给出未截断值与截断后的值,省去自己按矩阵手算。

计算原理与变量说明

常用 sepia 系数矩阵(Microsoft 口径)是三行:

R' = 0.393 R + 0.769 G + 0.189 B
G' = 0.349 R + 0.686 G + 0.168 B
B' = 0.272 R + 0.534 G + 0.131 B

把每一行的系数加起来,得到 1.351、1.203、0.937。前两行都大于 1,这意味着不做截断就会溢出。取纯白 (255, 255, 255) 验算:三行分别是 1.351 × 255 = 344.505、1.203 × 255 = 306.765、0.937 × 255 = 238.935,红绿两通道都超过了 255。截断之后是 (255, 255, 239)。

这个结果的直接后果是:白纸被 sepia 之后不是白色,而是 (255, 255, 239) 的暖白。蓝通道 238.935 没溢出,四舍五入到 239,比 255 低了 16 级,这一点点差值就是溢出被截断留下的痕迹。若把图片里的纯白区域放大看,会发现它带一点黄。

降饱和与暗角都要先算亮度,这里用 Rec.601 权重 0.299 R + 0.587 G + 0.114 B。另一套常见口径是 Rec.709 的 0.2126 R + 0.7152 G + 0.0722 B,两组系数各自之和都等于 1,所以纯白算出来仍是 255。Rec.601 来自标清电视时代,Rec.709 来自高清时代,两者对绿色通道的权重差得最多。

逐像素的代价很固定:每个像素要做 9 次乘加(三个输出各三个系数),与邻域无关,复杂度是 O(W × H),一次 ImageData 扫描就能做完。1024 × 768 = 786432 个像素,需要 7077888 次乘加。这也是本页给 800 万像素设上限的原因:再大下去主线程会明显卡顿。

alpha 通道不参与颜色矩阵运算,原样保留。否则半透明的边缘会被染成不透明的褐色,PNG 的透明区域会糊出一层棕边。噪点与暗角同样只作用于 RGB 三个通道。

完整示例(数值仅作演示)

打开页面时色值试算框里写着五组输入。纯白 (255, 255, 255) 的未截断结果是 (344.505, 306.765, 238.935),溢出量 (89.505, 51.765, 0),截断后是 (255, 255, 239)。中灰 (128, 128, 128) 三行都不溢出,得 (172.928, 153.984, 119.936),四舍五入后是 (173, 154, 120) 的暖褐色。

纯红 (255, 0, 0) 只有红通道有输入:0.393 × 255 = 100.215、0.349 × 255 = 88.995、0.272 × 255 = 69.36,截断后是 (100, 89, 69)。纯蓝 (0, 0, 255) 则只剩三个蓝系数:0.189 × 255 = 48.195、0.168 × 255 = 42.84、0.131 × 255 = 33.405,截断后是 (48, 43, 33)。纯黑 (0, 0, 0) 三个输出都是 0,说明这个矩阵保住了黑场。

由此能看出 sepia 的一个性质:它把純红与纯蓝这两个极端色相压到了同一条暖色轴上,两者之间的色相距离被大幅压缩,而亮度大体保留——纯红结果比纯蓝结果亮得多,与输入端的亮度关系一致。

色值锚点对照表

下表给出几个基准色经过 sepia 矩阵的结果,未截断值超过 255 的部分就是溢出量。

输入未截断结果截断后溢出量说明
(0,0,0)0, 0, 00,0,00, 0, 0黑场保留
(128,128,128)172.928, 153.984, 119.936173,154,1200, 0, 0暖褐色
(255,0,0)100.215, 88.995, 69.36100,89,690, 0, 0只有红通道有输入
(0,255,0)196.095, 174.93, 136.17196,175,1360, 0, 0绿通道权重最高
(0,0,255)48.195, 42.84, 33.40548,43,330, 0, 0蓝系被压得很暗
(255,255,255)344.505, 306.765, 238.935255,255,23989.505, 51.765, 0白纸变成暖白

第二张表给出像素规模与乘加次数的对应关系,用来判断一张图会不会卡。

尺寸像素数乘加次数参考
640 × 4803072002764800标清,即时完成
1024 × 7687864327077888常见屏幕截图
1920 × 1080207360018662400全高清照片
3840 × 21608294400746496004K,接近上限

结果边界、舍入与适用说明

常见问题

为什么白纸做完 sepia 不是白色?

因为三行系数之和是 1.351、1.203、0.937,前两行都大于 1。纯白被算成 (344.505, 306.765, 238.935),红绿两通道溢出后被截断到 255,蓝通道 238.935 没溢出,四舍五入到 239,于是白纸变成 (255, 255, 239) 的暖白。

sepia 就是复古吗?

不完全是。sepia 只是把彩色投影到一个固定的暖色子空间:饱和度被压掉、色相被拉向橙黄、亮度大体保留。复古通常还要降饱和、降对比,再叠加颗粒噪点与暗角,本页把这些拆成了独立参数。

Rec.601 和 Rec.709 该用哪个?

本页的降饱和用 Rec.601 的 0.299、0.587、0.114。另一套常见口径是 Rec.709 的 0.2126、0.7152、0.0722。两组各自之和都等于 1,差别主要在绿色通道的权重:Rec.601 来自标清电视时代,Rec.709 来自高清时代。

处理一张图要算多少次?

每个像素固定 9 次乘加,与邻域无关,所以总次数是像素数乘 9。1024 × 768 = 786432 像素需要 7077888 次乘加;1920 × 1080 是 18662400 次;4K 会到 74649600 次,这也是本页给 800 万像素设上限的原因。

透明区域会被染成褐色吗?

不会。alpha 通道不参与颜色矩阵运算,原样保留;噪点与暗角同样只作用于 RGB。若把 alpha 也丢进矩阵,半透明区域会被染成不透明的褐色,PNG 的透明边缘会糊出一层棕边。

强度、降饱和、暗角分别改的是什么?

强度决定原色与 sepia 结果的混合比例,0 是原图、100 是完整 sepia;降饱和在 sepia 之后把颜色朝 Rec.601 亮度拉;暗角按像素到画面中心的距离压暗四周,中心不受影响。

图片会上传到服务器吗?

不会。文件只在本地被解码成 ImageData,逐像素运算后画进画布,页面没有发起任何上传请求;点「下载 PNG」也是浏览器本地生成的文件。

为什么大图会卡?

逐像素运算在主线程上一次扫完,没有分片也没有交给 Web Worker。像素越多乘加次数越多,800 万像素需要约 7200 万次乘加,主线程会明显停顿。请先缩小尺寸再处理。

相关工具