渐变映射指南

传统的滤镜往往效果不佳，因为它们只是在整张图片上覆盖一层均匀的颜色。当你叠加简单的蓝色或红色调时，会使高光部分的纯白变得浑浊，并冲淡阴影部分的深黑。这种平铺的方式会削弱对比度，使你的图片看起来平庸且缺乏质感。

为什么你需要这个工具

传统的滤镜往往效果不佳，因为它们只是在整张图片上覆盖一层均匀的颜色。当你叠加简单的蓝色或红色调时，会使高光部分的纯白变得浑浊，并冲淡阴影部分的深黑。这种平铺的方式会削弱对比度，使你的图片看起来平庸且缺乏质感。

渐变映射通过将色彩分级与亮度分离，解决了这一问题。它不是简单地在图片上涂抹颜色，而是根据不同的亮度级别分配特定的颜色。它将暗部映射为一种颜色，亮部映射为另一种颜色，中间调则平滑过渡。这既保留了图片的结构对比度，又能让你建立起统一且极具风格的配色方案。无论你是想创造戏剧性的电影感、复古的双色调图形，还是微妙的冷暖色调过渡，渐变映射都能让你精确控制色彩与光影的交互。

你需要准备什么

在开始调色之前，你必须准备好源图片并规划好创意方向。libvips 需要特定的文件类型和大小才能正确处理你的图片。

要使用渐变映射工具，你需要满足以下条件：

兼容的源文件：图片必须是 JPG、JPEG、PNG 或 WEBP 格式。该工具不支持原始相机文件或矢量图形。 文件大小限制：图片文件不得超过 20MB。任何超过 20MB 阈值的文件都超出了支持范围，将无法处理。 现代浏览器：你需要使用更新后的浏览器来渲染实时预览并处理本地任务。 配色策略：你应该提前确定配色目标。对于标准的摄影调色，选择深冷色作为阴影，浅暖色作为高光。对于图形双色调，选择高对比度的互补色。 单文件工作流：该工具一次处理一个文件。它不支持批量处理，因此你需要逐个上传和下载文件。

分步操作指南

按照以下步骤为你的图片应用渐变映射，实现专业的色彩分级。

### 第 1 步：验证并准备文件 开始前请检查你的图片文件。确保其保存为支持的格式：JPG、JPEG、PNG 或 WEBP。查看文件属性以确认大小在 20MB 以内。如果文件过大，则超出了支持限制，你必须在外部编辑器中调整大小后再上传。

### 第 2 步：加载图片 打开浏览器并进入渐变映射工具页面。点击上传区域或直接将文件拖入浏览器窗口。工具将读取文件并在屏幕上显示原始图片。

### 第 3 步：定义阴影和高光颜色 找到渐变控制条。该条代表图片的亮度光谱，从左侧的绝对黑色到右侧的绝对白色。* 点击左侧色标（阴影）并选择你的深色。此颜色将替换图片中最暗的像素。 点击右侧色标（高光）并选择你的浅色。此颜色将替换最亮的像素。

### 第 4 步：调整中间调并添加色标 要创建更复杂的色彩分级，点击渐变条中间的任意位置以添加中间调色标。选择一种过渡色来连接阴影和高光。你可以左右拖动这些色标来控制颜色过渡的快慢。

### 第 5 步：调整混合与强度 使用不透明度或混合滑块来控制原始图片颜色的显示比例。将滑块调至最大可产生纯粹的双色调效果。降低滑块则会将渐变映射与图片原始颜色融合，产生更自然、微妙的调色效果。

### 第 6 步：处理并下载文件 当你对浏览器中的预览效果满意后，点击处理按钮。libvips 将把色彩映射应用到全分辨率图片上。处理完成后，点击下载按钮将新图片保存到你的设备。

工作原理

libvips 使用基于 WebAssembly 的客户端模式处理你的图片。这种架构在浏览器内本地处理所有任务，在不牺牲最终图片质量的前提下提供响应迅速的编辑体验。

当你加载 $2 文件时，浏览器会处理交互式用户界面并渲染实时预览。它通过在浏览器内存中创建图片的低分辨率副本来实现这一点。当你调整渐变条上的色标时，浏览器会即时计算颜色变化。这种本地处理方式让你无需等待服务器在每次微调后重新渲染图片，即可获得即时反馈。

在底层，渐变映射依赖于像素亮度的数学转换。libvips 会逐像素分析你的图片文件。它首先计算每个像素的亮度值，将红、绿、蓝颜色通道转换为 0（纯黑）到 255（纯白）之间的灰度值。

一旦 libvips 确定了像素的亮度值，它就会参考你的自定义渐变映射。如果像素的亮度值为 64（代表深阴影），libvips 会找到渐变条上 25% 位置处的颜色，并将像素的原始颜色替换为该映射颜色。

当你点击处理按钮以完成图片时，基于 WebAssembly 的客户端引擎会对全分辨率文件执行最终的逐像素重映射。如果文件较小，这可能完全在浏览器内完成。对于较大或较复杂的文件，libvips 会在本地重建图片文件结构。这种客户端处理方式确保了高分辨率输出与你的预览一致。由于同时映射数百万像素需要大量内存，任何超过 20MB 的文件都超出了支持限制，无法由 libvips 处理。

遇到问题时

了解错误发生的原因有助于你在转换过程中快速避免并解决问题。

### 文件无法上传或处理 如果文件无法上传，最常见的原因是它超过了 20MB 的支持限制。libvips 强制执行此限制。超过支持大小的文件将不会被处理。如果你尝试上传大于 20MB 的文件，libvips 会阻止上传，以防止浏览器标签页冻结或内存耗尽。要解决此问题，请在上传前使用图片查看器缩小图片尺寸。

### 色彩分级看起来有块状或像素化 如果输出文件显示出难看的块状色阶而不是平滑的渐变，说明你的原始文件可能经过了高压缩。低质量的 JPG 文件包含压缩伪影，压缩算法为了节省空间将相似的像素归为平坦的块。由于这些块具有均匀的亮度值，libvips 会将它们映射为完全相同的颜色。这会突出压缩伪影，使其清晰可见。要解决此问题，请始终上传高质量、低压缩的文件，如 PNG 或高比特率的 JPEG。

### 图片看起来平淡且浑浊 如果调色后的图片看起来灰蒙蒙、色彩暗淡或缺乏对比度，说明你的源图片动态范围较窄。如果照片是在平淡的阴天拍摄的，它就不会有很深的阴影或很亮的高光。由于几乎所有像素都落在中间亮度范围内，libvips 只会应用渐变映射的中间颜色。你选择的阴影和高光颜色会被忽略，因为源文件中不存在这些亮度级别。你可以在上传前增加源图片的对比度来解决此问题。

### 颜色看起来反转且怪异 如果图片看起来像底片，说明你将颜色映射到了渐变条的错误两端。libvips 将渐变左侧映射到阴影（暗像素），右侧映射到高光（亮像素）。如果你在左侧放置浅色，在右侧放置深色，libvips 就会使阴影变亮，高光变暗。要纠正此问题，请反转色标的位置。

获得最佳效果的建议

为了从 libvips 获得最高质量的色彩分级，请在工作流中应用这些专业实践。

先分析直方图：查看源图片，确保其暗部、中间调和亮部分布合理。拥有深阴影和亮高光的图片能为 libvips 提供更宽的亮度映射范围，从而产生更生动、动态的色彩分级。 保持高光颜色明亮，阴影颜色深暗：对于自然的摄影调色，始终选择亮度值较低的阴影颜色（如深海军蓝、森林绿或炭灰色）和亮度值较高的高光颜色（如象牙白、浅黄或柔和的桃色）。这能保持照片自然的色调层次。 图形设计使用 PNG 文件：如果你要为标志、文字或矢量风格插图应用渐变映射，请加载 $2 PNG 格式文件。PNG 使用无损压缩，能保留清晰的边缘。这使得 libvips 能够精确映射颜色，而不会在形状周围产生模糊的光晕。 限制色标数量：虽然在渐变中添加五六种颜色很诱人，但使用过多的色标会让图片看起来混乱且浑浊。坚持使用两到三种颜色，效果会更简洁、专业。 上传前检查文件大小：请记住，任何超过 20MB 的文件都超出了支持限制。将图片保存为 72 或 150 DPI 以供网页使用，在保持高视觉质量的同时减小文件大小。

常见问题解答

### 为什么应用渐变映射后，我的图片变成了一种单一的平坦颜色？ 这通常是因为源图片缺乏对比度。如果你的文件是白墙或深色夜空的照片，几乎所有像素都具有相同的亮度值。libvips 读取这些相同的值并将它们映射到渐变上的同一点，从而使整张图片变成一种平坦的颜色。选择一张具有更宽高光和阴影范围的图片即可解决此问题。

### 为什么该工具拒绝让我一次上传多张图片？ libvips 旨在单独处理图片以保持性能并防止浏览器内存过载。由于该工具不支持批量处理，你必须逐个上传、配置和下载每个文件。

### 为什么下载文件中的颜色看起来与浏览器中的预览略有不同？ 浏览器中的预览使用本地硬件加速来为你提供快速、实时的编辑近似效果。当你点击下载时，libvips 会对像素数据进行精确的无压缩渲染。如果你的浏览器使用的色彩配置文件与操作系统的默认图片查看器不同，可能会出现细微差异。

### 为什么我的上传因大小错误而失败？ 该工具严格限制文件大小为 20MB。如果你的图片文件为 20.1MB 或更大，则超出了支持限制。你必须在 libvips 接受之前压缩或调整图片文件大小，使其低于 20MB 阈值。

结论

渐变映射是一种高效且强大的技术，用于在图片中建立一致的视觉风格。通过将自定义颜色直接映射到文件的亮度值，你可以创造出令人惊叹的双色调和电影感色彩分级，同时保留主体自然的对比度。保持文件在 20MB 限制内，选择高对比度的源图片，并使用合理的配色方案，即可从基于 WebAssembly 的客户端 libvips 中获得最佳效果。立即开始尝试不同的颜色组合，改造你的照片和图形吧。