图片滤镜与效果，免费

「图像滤镜」对您的像素究竟做了什么

图像滤镜是对每个像素执行的数学运算。本工具中的每个滤镜都对应一种特定的变换。亮度 150% 将每个颜色通道乘以 1.5（上限封顶），使整张图像变亮。对比度 150% 围绕中点拉伸数值，将暗部像素拉向更暗、亮部像素拉向更亮。饱和度 在保持整体亮度的同时，将颜色推向或远离灰色。色相旋转 将每种颜色围绕色环按选定角度旋转。棕褐色调 应用固定的 3x3 矩阵，把 RGB 映射为暖棕色调色板（R' = 0.393R + 0.769G + 0.189B，G' 和 B' 也有类似公式）。灰度 按 ITU-R BT.601 系数（0.299、0.587、0.114）将每个像素压缩为其亮度加权平均，这与人眼感知明暗所用的权重相同。模糊 是高斯卷积：每个输出像素是周围像素的加权平均。反相 翻转每个通道：c' = 1 减去 c。

本工具的每个预设都是这些操作的命名组合。「Vivid」叠加高对比度和高饱和度；「黑白」将灰度设为 100%；「棕褐」将棕褐设为 100% 并降低饱和度；「暖调」加入棕褐色调和温和饱和度；「冷调」将色相旋转向蓝色；「复古」降低对比度和饱和度同时略微加暖；「戏剧」强力推高对比度和饱和度；「淡化」柔化对比度并略微提亮。在底层，每个预设只是写入一个不同的 CSS 滤镜字符串。您可以从任何预设出发，调整单个滑块以找到您想要的精确效果。

这里的所有滤镜都通过浏览器标准化的 CSS 滤镜函数（W3C Filter Effects Module Level 1）实现，自 2016 至 2019 年起在每个现代浏览器中都通过 GPU 实现。预览随着您拖动滑块实时更新，因为运算在显卡上计算而非在 CPU 上。下载步骤会把滤镜结果按原始图像尺寸烘焙到新的 PNG、JPEG 或 WebP 中，因此导出的文件已经带有应用后的外观；不需要单独的渲染步骤。

本工具的工作原理

滤镜引擎是浏览器的 Canvas API 与 CSS 滤镜函数的组合。当您拖入一张图片时，浏览器内置的解码器将文件（JPEG、PNG、WebP、GIF、BMP、AVIF 或 SVG）转换为内存中 HTMLImageElement 上的原始像素。这些像素被绘制到 <canvas> 元素上。要应用滤镜，工具设置 ctx.filter = 「brightness(150%) contrast(110%) saturate(120%) sepia(20%) ...」 并重新绘制源图像；浏览器在 GPU 上应用滤镜链，画布显示结果。

预设是存储在脚本中的预定义滤镜字符串。「黑白」是 grayscale(100%) contrast(105%)。「复古」可能是 sepia(35%) saturate(75%) contrast(95%) brightness(102%)。选择一个预设会把其中一个字符串写入画布的滤镜；然后各个滑块更新以匹配，您可以从那里微调。「按住对比」临时设置 ctx.filter = 「none」 并重新绘制原始图像，松开时恢复所选滤镜。

下载步骤把源图像按原始尺寸（而不是屏幕预览尺寸）重新绘制到一个应用了当前滤镜的新画布上，然后 canvas.toBlob() 把结果导出为新的 PNG、JPEG 或 WebP。输出的像素数据中已烘焙滤镜效果，因此接收者无需工具状态即可看到相同的外观。整个过程中没有任何内容离开标签页；滤镜本身不加载任何库。

照片滤镜简史

• 暗房调色，1860 至 1920 年代。 在软件出现之前很久，摄影师就用化学品施加「滤镜」：棕褐色调色、金调色、硒调色、对调色照片的手工上色。Polaroid SX-70（1976）将可辨识的色彩偏移烘焙到即时摄影中。这是每个现代预设的概念祖先。
• Photoshop 1.0，1990 年。 Adobe 推出 Photoshop 第一版，带有调整对话框：亮度/对比度、色相/饱和度、色彩平衡、变化。滤镜成为软件类别；摄影师现在可以应用非物理变换并撤销它们。
• 调整图层，1994 年。 Photoshop 3.0 引入调整图层，允许以非破坏性方式堆叠滤镜。这是每个现代预设堆栈的概念祖先：每个「滤镜」现在都是可重新排序、可单独调整的变换，而不是破坏性烘焙效果。
• Instagram 携命名预设上线，2010 年 10 月。 Instagram 上线时带有 11 个（后增至 17 个）命名预设：Amaro、Rise、Hudson、Valencia、X-Pro II、Sierra、Willow、Lo-Fi、Earlybird、Sutro、Toaster、Brannan、Inkwell、Walden、Hefe，以及必备的「Normal」。每个预设都是与本工具公开的概念上相似的特定像素数学运算组合。文化影响巨大：「滤镜」作为动词进入日常语言，移动照片编辑成为大众类别。
• 移动滤镜爆发，2011 至 2015 年。 VSCO（2011）、Snapseed（2011）、Afterlight（2012）、Lightroom Mobile（2014）。每个应用都增加自己的预设库，常常模拟特定胶片（柯达 Portra、富士 Velvia、Kodachrome）或尝试定义新的视觉风格。照片编辑离开桌面。
• 浏览器中的 CSS 滤镜，2016 至 2026 年。 W3C Filter Effects Module Level 1 在 2014 年标准化了 CSS 滤镜函数，主流浏览器在 Chrome 52（2016）、Firefox 49（2016）、Safari 13（2019）中提供支持。到 2026 年，所有浏览器都普遍具备 GPU 加速的 CSS 滤镜，使本工具的实时、无库实现成为可能。

图片滤镜的原理

图片滤镜通过修改照片的像素值来改变外观。亮度调整整体明暗，对比度控制明暗区域的差距，饱和度决定颜色的浓度。色相旋转在色环上移动所有颜色，而棕褐色和灰度将图片转为经典色调。模糊应用高斯平滑，反色则翻转所有颜色。

此工具使用浏览器原生的 CSS Canvas 滤镜引擎，GPU 加速以获得实时性能。所有处理均在本地完成 · 您的图片从不发送到服务器。

常见用途

• 在分享到社交媒体前修饰照片
• 将图片转为黑白或棕褐色以获得经典感
• 调整亮度和对比度，让产品照适合网页展示
• 应用冷暖色调以契合品牌视觉
• 为一批图片打造一致的视觉风格
• 无需安装软件即可快速修图

真实世界的滤镜工作流

• 为社交媒体抛光快照。 直接从手机相机拍摄的快照与专业发布相比显得平淡，因为相机优化的是保真度而非美学冲击力。10 至 15% 的对比度和饱和度提升，有时再加一点暖色调，就能把普通照片变成准备好发流的内容。Instagram 第一个十年里最常用的预设是 Valencia、Mayfair 和 Inkwell，它们都组合了这些操作。
• 品牌一致的视觉风格。 如果您的品牌以可识别的外观发布（酒店品牌的一致暖色调、科技刊物的冷淡色调、新闻刊物的高对比度黑白），把精确的滑块值保存为个人预设可以让您在几秒钟内对每张新照片应用相同外观。设置滑块一次，记下数值，作为起点模板重复应用。
• 经典黑白转换。 对于人像、新闻或任何颜色是干扰而非重点的题材，黑白预设（灰度 100% 加上小幅对比度提升）产生经典的单色外观。暗房时代的摄影师把整个职业用在通过选择性加深和减淡来精修黑白调子上；您可以用快速的对比度提升和通过亮度对阴影的小幅提亮来接近这种冲击力。
• 网页用亮度修正。 在室内或混合光下拍摄的手机照片在校准的显示器上常显得偏暗。小幅亮度提升（105 至 115%）和对比度提升（110 至 115%）能恢复冲击力而不会让图像显得人为发光。对于阴影被压垮的低光照片，降低对比度（90 至 95%）加上提亮亮度可以恢复阴影细节。
• 复古和怀旧模拟。 1970 至 90 年代的胶片外观共享一组 DNA：略低的对比度、更暖的白平衡、轻柔降低的饱和度，有时加点小模糊柔化颗粒。这里公开的复古和淡化预设是这些外观的配方。Cross-process 效果（Instagram 术语中的 X-Pro II）来自将色相旋转与高对比度和特定饱和度曲线组合。
• 可访问性和对比度检查。 设计师偶尔使用这些滑块检查布局对视障用户的呈现或色盲模拟。把灰度推到 100% 揭示设计是否只依靠颜色传达信息；推高对比度检查细文字在低视力条件下是否仍然可读。这不是合适的可访问性工具的替代品，但作为快速健全性检查很有用。

常见陷阱及其含义

• 滤镜会叠加，容易过头。 把亮度、对比度和饱和度各推到 150% 并不会产生单个 150% 设置三倍的效果；它会产生一个巨大、刺眼的效果，常常带有可见的高光裁切和阴影压扁，可见地降低图像质量。从一个滑块开始，评估，然后只在必要时加第二个。克制比极致主义产生更好的结果。
• 大多数滤镜可交换，但模糊不行。 数学上，先亮度后对比度与先对比度后亮度产生相同结果；大多数 CSS 滤镜函数的顺序不改变输出。模糊是例外：在颜色变化之前应用的模糊会扩散原始图像的边缘，而之后应用的模糊则扩散已偏色图像的边缘，两者可能产生明显不同的结果。在您的脑中顺序里把模糊放最后，或放在颜色调整之后。
• JPEG 导出会增加一次有损重编码。 以质量 92 下载为 JPEG 会在滤镜结果之上引入新的 DCT 量化噪声。要最高质量，请导出为 PNG（无损）；要更小的文件且损失不可察觉，JPEG 92 即可。不要对下载的 JPEG 反复操作（重新导入、调整、重新导出）；每一轮都会增加一代损失。
• 导出时会剥离 EXIF 和 ICC 元数据。 基于 Canvas 的重编码会移除 EXIF（相机、GPS、拍摄日期）、XMP、IPTC 以及嵌入的 ICC 色彩配置文件。对于社交媒体共享，这通常是隐私收益（GPS 坐标和相机序列号不会泄露）。对于元数据重要的归档或印刷工作流，请使用明确保留它们的桌面工具。
• 超大图像会让移动 GPU 吃力。 对 24 兆像素照片（6000x4000）的实时 GPU 滤镜仅源图像就需要约 96 MB 纹理内存，再加上滤镜过程的工作空间。较旧的移动设备可能卡顿、丢帧或耗尽 GPU 内存。如果预览缓慢，先调整图像大小（使用图像调整尺寸工具）再施加滤镜。
• 滤镜是全局的，不是选择性的。 本工具的每个滤镜都应用到整张图像。无法只提亮前景或只对天空增加饱和度。要做选择性编辑，请使用 Photoshop、Affinity Photo 或带蒙版的 GIMP 等基于图层的编辑器。本工具用于全图调整和预设，不用于局部编辑。

隐私：图像从不离开您的设备

每个基于云的照片滤镜服务（Pixlr、Fotor、BeFunky、各种「在线 Instagram 滤镜」网站）都把您的照片上传到运营商的服务器，在他们的硬件上应用滤镜，然后把滤镜后的图像作为下载发回。照片即使在滤镜后也常带有敏感元数据：照片拍摄地的 GPS 坐标、相机和设备信息、拍摄日期和时间，以及照片内容本身，其中常包含面孔、地点、内部界面截屏或其他可识别材料。大多数运营商发布隐私政策，承诺一两个小时内删除上传并在传输中加密，最大的几家持有 ISO/IEC 27001 认证。他们有强烈的商业动机来履行这些政策。但「一小时内删除」不等于「从未被看见」。在那一小时里，图像内容就在运营商的基础设施内，对任何拥有正确权限的进程或人员都可访问，并按运营商的保留政策出现在日志和备份中。

本滤镜工具从不上传任何内容。整个流水线（文件选择、通过浏览器内置解码器解码、通过 GPU 的 Canvas 滤镜、通过浏览器编码器的可选下载）都在您的浏览器标签页内运行，使用 JavaScript 和标准化的 CSS Filter Effects API。没有上传，没有携带图像数据的网络请求，没有日志条目。您可以在施加滤镜前打开浏览器开发工具的「网络」标签来验证：没有任何带图像内容的请求离开。唯一的网络流量是页面本身的初始加载；不为滤镜操作下载任何库。在页面加载后把浏览器切到飞行模式，滤镜工具仍可继续在本地图像上工作。

何时另一个工具才是正确选择

• 带正确色彩科学的 RAW 工作流。 如果您处理来自真正相机的 .CR2、.NEF、.ARW、.DNG 或其他 RAW 文件，请使用 Adobe Lightroom、Capture One、RawTherapee 或 darktable。RAW 转换需要相机特定的色彩配置文件、白平衡管理和动态范围映射，浏览器端 CSS 滤镜无法做到这些。本工具操作的是已经解码的 RGB 像素。
• 带蒙版的选择性编辑。 如果您需要只提亮主体、改变某个物体的颜色或对图像不同部分应用不同滤镜，请使用 Photoshop、Affinity Photo 或带图层蒙版的 GIMP。CSS 滤镜是全局的，没有渲染和重新导入就无法做局部编辑。
• 专业调色。 对于商业摄影、品牌活动工作或电影/视频调色，请使用 DaVinci Resolve（静态图像和视频均免费）、带自定义预设的 Lightroom，或带风格包的 Capture One。这些工具提供 LUT 支持、软打样、校准显示器和专业调色师所期望的工具集。
• 对数百或数千个文件的批量自动化。 请使用带 -modulate 和相关运算符的 ImageMagick、Node.js 中的 Sharp 或 libvips，或带 ImageEnhance 模块的 Pillow。命令行工具可对数千个文件应用相同调整而不受浏览器内存限制，并能从 CI、部署钩子或 cron 任务中运行。

常见问题

滤镜会降低图片质量吗？

滤镜在全分辨率下应用，不会造成质量损失。下载时，图片以原始尺寸并内嵌滤镜导出。JPEG 导出使用 92% 质量以获得极佳的保真度。

可以同时使用多个滤镜吗？

可以。8 个调整滑块可以同时生效。您也可以先选择一个预设，然后微调个别滑块，以获得想要的效果。

「按住对比」有什么作用？

按住「按住对比」按钮时，预览会暂时显示未加滤镜的原图。松开后恢复到已加滤镜的版本。方便快速对比前后效果。

我的图片会被上传到某处吗？

不会。所有滤镜处理都使用浏览器内置的 Canvas API。您的图片完全保留在您的设备上，绝不会发送到服务器。

其他常见问题

为什么我的图像在极端设置下看起来像色调分离？

因为数学没有余地。每个颜色通道只有 256 个可能数值（8 位 RGB 中的 0 至 255）。把亮度或对比度推到远超原始范围之外会裁切到 0 或 255，而不是保留优雅的渐变。结果是色带（应该平滑过渡的部分出现可见台阶）和色调分离（区域塌缩为单一颜色）。修复方法：拉回最极端的滑块，或如果有的话从更高位深的源开始（RAW 或 16 位 TIFF，在保留位深的桌面工具中编辑）。

我能保存自定义预设吗？

在本工具的界面里不能直接保存。但滑块数值本身就是您的「预设」：记下八个数字（亮度、对比度、饱和度、棕褐、灰度、色相旋转、模糊、反相），您就能在几秒钟内对任何未来照片重现该外观。对于希望在批次上保持相同外观的多照片工作流，这种手动方式在大约 5 至 10 张照片以内可行；超出后，Photoshop、Lightroom、Capture One 或带保存预设包的 VSCO 才是合适的工具。

滤镜顺序重要吗？

对大多数滤镜，不重要：先亮度后对比度与先对比度后亮度产生相同输出。亮度、对比度、饱和度、棕褐、灰度、色相旋转和反相的 CSS 滤镜函数彼此都可交换。模糊是例外：在颜色变化前应用的模糊影响原始边缘；之后应用的模糊影响偏色后的边缘，两者输出可见地不同。实际上，本工具按固定顺序应用所有滤镜，因此只有在您试图复制另一种使用不同顺序的工具的精确效果时这个问题才重要。

这个工具能离线工作吗？

可以。CSS 滤镜引擎、Canvas API 以及 JPEG、PNG、WebP、GIF、BMP 和 AVIF 的解码器/编码器都内置于每个现代浏览器。滤镜不下载任何外部库。在页面本身首次加载后，只要页面留在浏览器缓存中，后续访问完全离线工作。在首次访问后开启飞行模式并对本地图像施加滤镜来验证。

下载的图像会保留 EXIF 元数据吗？

不会。基于 Canvas 的重编码会丢弃 EXIF（相机、镜头、曝光、GPS、拍摄日期）、XMP、IPTC 元数据块以及嵌入的 ICC 色彩配置文件。下载的图像只携带像素数据。对于社交媒体共享，这通常是好事（GPS 坐标和相机序列号不会泄露）。对于元数据重要的归档或摄影工作流，请使用像 Photoshop 或 Lightroom 这样在导出时保留元数据的桌面编辑器。

有桌面或命令行的等效工具吗？

有几个。对于批量自动化，ImageMagick 的 -brightness-contrast、-modulate 和相关运算符可从任何 shell 应用相同的变换。Node.js 中的 Sharp 有完整的调整 API。Python 中的 Pillow 提供 ImageEnhance.Brightness、ImageEnhance.Contrast、ImageEnhance.Color 和类似的类。对于交互式桌面工作，Photoshop、Lightroom（专业标准）、Affinity Photo、GIMP 和 Pixelmator Pro 都提供相同的操作以及用于选择性编辑的图层蒙版。

相关工具