🖼️ PicKit
EN

图片滤镜指南：灰度、复古、模糊等效果

·

CSS filter 函数介绍

CSS filter 属性提供了一系列图形滤镜函数，可以在浏览器中对图片实时应用各种效果。这些函数可以单独使用，也可以组合使用创建复杂的效果。

基本语法

.image {
  filter: grayscale(100%) blur(2px);
}

滤镜函数一览

函数作用参数范围典型用途
grayscale()灰度0-100% 或 0-1黑白照片效果
sepia()复古褐色0-100% 或 0-1怀旧效果
invert()反色0-100% 或 0-1负片效果
blur()模糊像素值（px）背景虚化
brightness()亮度0-200% 或 0-2曝光调整
contrast()对比度0-200% 或 0-2增强层次
saturate()饱和度0-200% 或 0-2色彩浓度
hue-rotate()色相旋转0-360deg色调变换
opacity()透明度0-100% 或 0-1半透明效果
drop-shadow()阴影x y blur color投影效果

各种滤镜效果详解

灰度滤镜（Grayscale）

灰度滤镜将彩色图片转换为黑白图片，移除所有色彩信息，只保留亮度。

/* 完全灰度 */
.grayscale-full {
  filter: grayscale(100%);
}

/* 部分灰度，保留少量色彩 */
.grayscale-partial {
  filter: grayscale(70%);
}

使用场景：

  • 黑白艺术摄影效果
  • 网站悼念模式
  • 图片悬停时变彩色（默认灰度，悬停恢复）

复古滤镜（Sepia）

复古滤镜给图片添加褐色调，模拟老照片的效果。

/* 完全复古 */
.sepia-full {
  filter: sepia(100%);
}

/* 轻度复古 */
.sepia-light {
  filter: sepia(40%);
}

使用场景：

  • 怀旧风格设计
  • 婚纱摄影效果
  • 复古主题网站

反色滤镜（Invert）

反色滤镜将图片的所有颜色值反转，产生负片效果。

.invert {
  filter: invert(100%);
}

使用场景：

  • 深色模式适配
  • 特殊视觉效果
  • 无障碍辅助

模糊滤镜（Blur）

模糊滤镜让图片产生失焦效果，常用于背景虚化。

/* 轻微模糊 */
.blur-light {
  filter: blur(2px);
}

/* 强烈模糊，适合背景 */
.blur-heavy {
  filter: blur(10px);
}

使用场景：

  • 弹窗背景虚化
  • 加载占位图
  • 隐私遮挡

亮度滤镜（Brightness）

亮度滤镜调整图片的明暗程度。

/* 变暗 */
.darken {
  filter: brightness(70%);
}

/* 变亮 */
.brighten {
  filter: brightness(130%);
}

对比度滤镜（Contrast）

对比度滤镜调整图片明暗区域的差异。

/* 降低对比度，柔和效果 */
.soft {
  filter: contrast(80%);
}

/* 提高对比度，鲜明效果 */
.vivid {
  filter: contrast(150%);
}

饱和度滤镜（Saturate）

饱和度滤镜调整图片色彩的浓度。

/* 去饱和 */
.desaturate {
  filter: saturate(50%);
}

/* 超饱和 */
.hyper-saturate {
  filter: saturate(200%);
}

滤镜使用场景

复古效果

组合多个滤镜可以创建更自然的复古效果：

.vintage {
  filter: sepia(50%) contrast(110%) brightness(90%) saturate(80%);
}

艺术效果

/* 冷色调艺术效果 */
.cold-art {
  filter: hue-rotate(180deg) saturate(150%) contrast(120%);
}

/* 暖色调艺术效果 */
.warm-art {
  filter: sepia(30%) saturate(150%) brightness(110%);
}

/* 高对比黑白 */
.dramatic-bw {
  filter: grayscale(100%) contrast(150%) brightness(90%);
}

无障碍应用

滤镜在无障碍设计中也有应用价值：

/* 悬停时恢复彩色 */
img.grayscale-hover {
  filter: grayscale(100%);
  transition: filter 0.3s;
}

img.grayscale-hover:hover {
  filter: grayscale(0%);
}

/* 焦点状态高亮 */
img:focus {
  filter: brightness(120%) contrast(110%);
}

加载占位图

模糊滤镜常用于图片加载时的占位效果：

.image-placeholder {
  filter: blur(20px);
  transform: scale(1.1); /* 避免模糊边缘 */
  transition: filter 0.3s;
}

.image-placeholder.loaded {
  filter: blur(0);
}

Canvas API 实现原理

CSS filter 在浏览器中实时渲染，但如果需要将滤镜效果永久保存到图片文件中，需要使用 Canvas API 进行像素级处理。

灰度效果实现

function applyGrayscale(imageData) {
  const data = imageData.data;
  for (let i = 0; i < data.length; i += 4) {
    // 使用亮度公式计算灰度值
    const gray = 0.299 * data[i] + 0.587 * data[i + 1] + 0.114 * data[i + 2];
    data[i] = gray;     // R
    data[i + 1] = gray; // G
    data[i + 2] = gray; // B
  }
  return imageData;
}

复古效果实现

function applySepia(imageData) {
  const data = imageData.data;
  for (let i = 0; i < data.length; i += 4) {
    const r = data[i];
    const g = data[i + 1];
    const b = data[i + 2];

    // 复古色调转换矩阵
    data[i] = Math.min(255, r * 0.393 + g * 0.769 + b * 0.189);
    data[i + 1] = Math.min(255, r * 0.349 + g * 0.686 + b * 0.168);
    data[i + 2] = Math.min(255, r * 0.272 + g * 0.534 + b * 0.131);
  }
  return imageData;
}

反色效果实现

function applyInvert(imageData) {
  const data = imageData.data;
  for (let i = 0; i < data.length; i += 4) {
    data[i] = 255 - data[i];     // R
    data[i + 1] = 255 - data[i + 1]; // G
    data[i + 2] = 255 - data[i + 2]; // B
  }
  return imageData;
}

完整的 Canvas 滤镜处理流程

function applyFilter(image, filterFunction) {
  const canvas = document.createElement('canvas');
  const ctx = canvas.getContext('2d');

  canvas.width = image.width;
  canvas.height = image.height;

  ctx.drawImage(image, 0, 0);

  const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
  const filteredData = filterFunction(imageData);
  ctx.putImageData(filteredData, 0, 0);

  return canvas.toDataURL('image/png');
}

// 使用示例
const filteredImage = applyFilter(image, applyGrayscale);

如何使用 PicKit 滤镜工具

PicKit 图片滤镜工具 提供了多种预设滤镜和自定义参数，可以实时预览效果并下载处理后的图片。

操作步骤

  1. 上传图片：点击上传或拖放图片到页面
  2. 选择滤镜：
    • 预设滤镜：灰度、复古、反色、模糊等
    • 自定义参数：调整各滤镜的强度
  3. 实时预览：调整参数时立即看到效果
  4. 下载结果：满意后下载处理后的图片

预设滤镜效果

滤镜名称效果组合适用场景
原图无滤镜对比参考
灰度grayscale(100%)黑白照片
复古sepia(60%) contrast(110%)怀旧风格
冷色hue-rotate(180deg)艺术效果
暖色sepia(30%) saturate(130%)温暖氛围
高对比contrast(150%) saturate(120%)鲜明效果
柔和brightness(110%) contrast(90%)柔和氛围
模糊blur(5px)背景虚化

组合滤镜效果

组合多个滤镜可以创建独特的效果。以下是一些实用的组合方案：

电影质感

.cinematic {
  filter: contrast(115%) brightness(95%) saturate(85%) sepia(15%);
}

Instagram 风格滤镜

/* 类似 Valencia */
.valencia {
  filter: sepia(20%) contrast(110%) brightness(110%) saturate(130%);
}

/* 类似 X-Pro II */
.x-pro-ii {
  filter: contrast(120%) brightness(110%) saturate(150%) sepia(30%);
}

/* 类似 Inkwell（黑白） */
.inkwell {
  filter: grayscale(100%) contrast(110%) brightness(110%);
}

专业摄影效果

/* 人像柔肤 */
.portrait-soft {
  filter: blur(0.5px) brightness(105%) contrast(95%) saturate(90%);
}

/* 风景增强 */
.landscape {
  filter: saturate(120%) contrast(110%) brightness(105%);
}

/* 夜景增强 */
.night {
  filter: brightness(120%) contrast(130%) saturate(80%);
}

滤镜性能优化

CSS filter 性能考虑

CSS filter 在浏览器中实时计算，复杂滤镜组合可能影响性能。

滤镜性能影响优化建议
grayscale低可放心使用
sepia低可放心使用
invert低可放心使用
blur高避免大半径模糊
组合滤镜中-高限制组合数量

优化技巧

/* 使用 will-change 提示浏览器优化 */
.filter-heavy {
  will-change: filter;
  filter: blur(10px) contrast(120%);
}

/* 避免在动画中使用重滤镜 */
/* 不推荐 */
@keyframes bad-filter {
  from { filter: blur(0); }
  to { filter: blur(20px); }
}

/* 推荐：使用 transform 替代 */
@keyframes good-filter {
  from { transform: scale(1); }
  to { transform: scale(1.1); }
}

常见问题

CSS filter 和 Canvas 滤镜有什么区别？ CSS filter 在浏览器中实时渲染，不修改原始图片文件，适合网页显示。Canvas 滤镜直接修改像素数据，可以将效果保存到图片文件中。使用 PicKit 滤镜工具 可以将滤镜效果永久保存到图片中。

滤镜效果会影响图片质量吗？ CSS filter 不影响原始图片质量，只是显示效果。但使用 Canvas 保存滤镜效果时，JPEG 格式可能因重新编码而轻微损失质量。建议使用 PNG 格式保存以获得无损效果，或使用高质量 JPEG（90% 以上）。

如何撤销滤镜效果？ CSS filter 设置为 none 即可撤销。使用 Canvas 处理的图片需要保留原始图片备份，因为像素修改不可逆。PicKit 滤镜工具在处理过程中始终保留原始图片，可以随时重新调整。

滤镜可以只应用到图片的一部分吗？ CSS filter 应用于整个元素。如果需要局部效果，可以使用遮罩（mask）或 Canvas API 处理特定区域。Canvas 可以通过 getImageData 和 putImageData 精确控制每个像素的滤镜应用范围。

为什么我的模糊滤镜有锯齿边缘？ 大半径模糊可能暴露图片边缘。解决方案是稍微放大图片（transform: scale(1.05)）让模糊区域超出可见范围，或使用 overflow: hidden 裁剪边缘。