两张图片和一个 API：重新着色产品所需的一切

我最近找到了一种动态更新任何产品图片颜色的解决方案。 因此，只需一个 <img> 产品，我们就可以用不同的方式对其进行着色以显示不同的颜色选项。 我们甚至不需要任何花哨的 SVG 或 CSS 即可完成！

我们将使用图像编辑器（例如 Photoshop 或 Sketch）和图像转换服务 imgix。（这不是赞助帖子，也没有任何关联——我只是想分享一种技术。）

查看 CodePen 上的
动态汽车颜色，作者是 Der Dooley (@ddools)
在 CodePen 上。

我在一家名为 CarTrawler 的旅行软件公司担任工程团队成员，我最近承担了一个项目，对我们用于显示租车搜索结果的汽车图片库进行了改进。 我想借此机会介绍动态着色的汽车。

我们有时可能会同时加载多达 200 辆不同的汽车，因此速度和性能是关键要求。 我们在独特的代码库中还有五种不同的产品，因此避免过度工程对于成功至关重要。

我希望能够动态更改每辆汽车的颜色，而无需对代码进行额外的前端更改。

步骤 1：基础层

我在这里使用汽车照片，但此技术可以应用于任何产品。 首先，我们需要一个基础层。 这是我们无需任何颜色即可显示的默认层，并且它本身应该看起来不错。

步骤 2：涂漆层

接下来，我们创建一个涂漆层，其尺寸与基础层相同，但仅包含颜色应动态更改的区域。

涂漆层使用浅色是关键。 使用白色或浅灰色为我们提供了很大的优势，因为我们最终将此图像与颜色“混合”。 任何更暗或色调不同的颜色都难以将此基础色与其他颜色混合。

步骤 3：使用 imgix API

事情变得有趣起来。 我将利用 imgix API 的多个参数。 让我们将黑色应用于涂漆层。

我们通过应用标准黑色十六进制值 #000000 更改了颜色。

https://ddools.imgix.net/cars/paint.png?w=600&bri=-18&con=26&monochrome=000000

如果您注意到上面图像的 URL，您可能想知道：所有这些参数到底是什么？ imgix API 文档 提供了许多有用的信息，因此无需在此处详细介绍。 但我将解释我使用的参数。

• w。 我希望图像具有的宽度
• bri。 调整亮度级别
• con。 调整对比度
• monochrome。 动态十六进制颜色

因为我们将通过 imgix 堆叠图层，所以我们需要编码涂漆层。 这意味着用编码值替换 URL 中的一些字符——就像我们在 CSS 中使用内联 SVG 作为背景图像时所做的那样。

https%3A%2F%2Fddools.imgix.net%2Fcars%2Fpaint.png%3Fw%3D600%26bri%3D-18%26con%3D26%26monochrome%3D000000

步骤 4：堆叠图层

现在，我们将使用 imgix 的 水印参数 将涂漆层堆叠在基础层之上。

https://ddools.imgix.net/cars/base.png?w=600&mark-align=center,middle&mark=[PAINTLAYER]

让我们看看正在使用的参数

• w。 这是图像宽度，对于两个图层都必须相同。
• mark-align。 这将涂漆层居中放置在基础层之上。
• mark。 这是编码的涂漆层所在的位置。

最后，您将获得一个看起来像这样的单个 URL

https://ddools.imgix.net/cars/base.png?w=600&mark-align=center,middle&mark=https%3A%2F%2Fddools.imgix.net%2Fcars%2Fpaint.png%3Fw%3D600%26bri%3D-18%26con%3D26%26monochrome%3D000000

这使汽车变成黑色

现在我们有了单个 URL，我们可以用任何其他颜色替换黑色十六进制值。 让我们试试蓝色！

或者绿色！

为什么不试试红色呢？

---

就是这样！ 当然有 其他方法可以实现相同的结果，但这似乎非常简单，值得分享。 无需编写一堆额外的功能。 无需管理或处理复杂的库。 我们只需要几张图像，然后在线工具就会为我们堆叠和混合这些图像。 看起来这是一个非常合理的解决方案！