如何使用 RGBA 和更多通道独立于其颜色来更改图像的颜色

Question

由于我很难解释我正在尝试做什么，我将向您展示此页面以向您展示我正在尝试复制和理解的内容：

https://optifine.net/showCape?colTop=FF0000&colBottom=00FF00&colText=0000FF&colShadow=FD0000

输出这个：

这个https://optifine.net/showCape?colTop=FF00FF&colBottom=0034EE&colText=000000&colShadow=FF00E2 输出这个：

您可以修改十六进制颜色，基本上我正在尝试重现类似的东西。基本上你修改颜色，它会在最后给你一个你使用的颜色的图像。

我尝试制作可以在 Photoshop 页面上使用的“可能”模板，可以在此处下载，它是一个 .psd 文件，这是因为 Alpha 通道，我什至不确定如果正确完成。但是基于这些 RGBA 通道，应该可以改变颜色。可以在这里下载：https://workupload.com/file/4xYkgQMk

 

所以到目前为止我所知道的是有一个带有 RGBA 通道的模板。每个通道都是独立的，所以如果它是 RGBA 并且最后 R 通道用于变成红色以外的另一种颜色，我对此不确定。

我问过开发人员，他告诉我，这些通道之后会用真实颜色进行插值，可能是你选择的那个。

基本上showCape? 发生的事情及其 URL 参数是，假设 colTop 被分配给红色通道，然后当您将颜色放入 colTop 时，它将获得一个固定的颜色，它将编码或其他东西。

所以模板有 4 个通道 RGBA 可以在 Photoshop 中制作，白色 255,255,255 表示基本全黑，黑色 0,0,0 表示全黑。像这样，您可以为模板设置亮度等级。

我只是不知道如何修改通道，也不了解如何正确使用或设置 Alpha 通道。

我也不确定可以在哪些编程语言中执行，以及是否可以直接在 Photoshop 等工具中测试模板。是否可以使用 JavaScript 或其他易于设置的工具来完成，如果没有，那么可以快速测试它吗？

Answer 1

好的，下面将介绍如何使用 ImageMagick 生成此类内容，大多数 Linux 发行版中都包含该工具，并且适用于 macOS 和 Windows。请注意，有 Python、PHP、node.js 和其他可用的绑定。

首先，生成一个红色矩形：

magick -size 200x150 xc:red red.png

---

现在看看如何用十六进制代码做同样的事情：

magick -size 200x150 xc:"#ff0000" red.png

---

现在，绘制一个红色矩形，顶部有一个蓝色矩形：

magick -size 200x150 xc:red -fill blue -draw "rectangle 10,10 80,140" redandblue.png

---

现在使蓝色透明：

magick -size 200x150 xc:red -fill blue -draw "rectangle 10,10 80,140" -transparent blue redandtrans.png

---

现在做一个从淡绿色到洋红色的渐变：

magick -size 200x150 gradient:lime-magenta gradient.png

---

现在将带有透明窗口的红色矩形覆盖到渐变上：

magick gradient.png redandtrans.png -composite overlay.png

---

现在添加文本：

magick overlay.png -fill "#0000ff" -pointsize 16 -draw "text 90,40 'Coloured text'" result.png

---

现在再一次完成整个过程：

magick -size 200x150 gradient:lime-magenta                                    \
    \( xc:red -fill blue -draw "rectangle 10,10 80,140" -transparent blue \)  \
    -composite                                                                \
    -fill "#0000ff" -pointsize 16 -draw "text 90,40 'Coloured text'" result.png

---

现在你已经提供了一个模板，我可以像这样用 ImageMagick 分离出通道，并将它们与左侧的红色通道并排附加，然后是绿色，然后是蓝色，然后是 alpha /透明频道在右边。我还在每个周围添加了一个红色框，以便您可以看到 StackOverflow 的白色背景上的范围。

magick template.png -separate -scale 100x +append channels.png

关键字：ImageMagick、绝对基础、教程、透明度、合成、叠加、命令行、图像处理。

Answer 2

这听起来像是 VGA 时代的索引颜色/调色板效果（如等离子、水和火），您可以在其中更改调色板（以特定方式）并且图像随之更改。

这个想法是您的图像/精灵不直接包含 RGB 颜色，而是来自调色板的颜色索引。图像/精灵的调色板的一部分包含颜色渐变，因此图像上的渐变也是索引上的渐变（相邻的阴影也有相邻的索引）。许多过去的像素艺术精灵和图像都是以这种方式完成的（排序调色板）。

现在您可以简单地在调色板的该部分选择几种颜色，然后插入渐变的其余部分（线性或更好）。

模仿你的需求：

1. 有一个带有排序调色板的索引彩色像素艺术

   例如，您可以使用调色板将图像转换为 BMP 或 GIF 并对颜色进行排序。

2. 用颜色渐变检测调色板部分

3. 更改/更新渐变

4. 重新渲染或重新着色图像。