Как изменить цвета изображения, используя RGBA и более каналов, независимо от их цвета - PullRequest
Новая
       18

Как изменить цвета изображения, используя RGBA и более каналов, независимо от их цвета

1 голос
/ 05 ноября 2019

Поскольку мне трудно объяснить, что я пытаюсь сделать, я покажу вам эту страницу, чтобы показать вам, что я пытаюсь воспроизвести и понять:

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, это из-за альфа-канала, в котором я даже не уверен, что все сделано правильно. Но на основе этих каналов RGBA должно быть возможно изменить цвет. Можно скачать здесь: https://workupload.com/file/4xYkgQMk

Итак, я знаю, что существует шаблон с каналом RGBA. Каждый канал независим, поэтому, к сожалению, не имеет значения, является ли он RGBA, и в конце канал R используется для превращения в другой цвет, отличный от красного, где я не уверен в этом.

Я спросилразработчик, он сказал мне, что после этого эти каналы будут интерполированы с реальным цветом, вероятно, тем, который вы выберете.

По сути, то, что происходит в showCape? и его параметрах URL, позволяет предположить, что colTop был назначен накрасный канал, тогда, когда вы помещаете цвет в colTop, он получает фиксированный цвет, который он будет кодировать или что-то в этом роде.

Таким образом, шаблон имеет 4 канала RGBA, которые можно создать в Photoshop, белый цвет 255,255,255 означает в основномполный и черный 0,0,0 означает полный черный. Например, вы можете настроить шкалы яркости для шаблона.

Я просто не знаю, как изменить каналы, и я не понимаю, как правильно использовать альфа-каналы или настроить их.

Я также не уверен, на каких языках программирования это возможно, и если вы можете проверить шаблон непосредственно в чем-то вроде Photoshop. Возможно ли сделать это на JavaScript или что-то для легкой настройки, а если нет, то для быстрого тестирования?

Ответы [ 2 ]

2 голосов
/ 06 ноября 2019

Хорошо, вот как вы можете создавать такие вещи с помощью ImageMagick , который входит в большинство дистрибутивов Linux и доступен для macOS и Windows. Обратите внимание, что доступны Python, PHP, node.js и другие привязки.

Сначала создайте красный прямоугольник: 

magick -size 200x150 xc:red red.png

enter image description here

Теперь посмотрим, как сделать то же самое с шестнадцатеричными кодами: 

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

enter image description here

Теперь нарисуйте красныйпрямоугольник с синим сверху: 

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

enter image description here

Теперь сделайте синий прозрачным: 

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

enter image description here

Теперь сделайте градиент от светло-зеленого до пурпурного: 

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

enter image description here

Теперь наложите красный прямоугольник с прозрачным окном на градиент: 

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

enter image description here

Теперь добавьте текст: 

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

enter image description here

А теперь сделайте все снова, за один раз: 

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 вот так и добавить их рядом с красным каналомl слева, затем зеленый, затем синий, а затем канал альфа / прозрачности справа. Я также добавил красный квадрат вокруг каждого из них, чтобы вы могли видеть экстент на белом фоне StackOverflow. 

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

enter image description here

Ключевые слова : ImageMagick, абсолютные основы, учебник, прозрачность, создание, наложение, командная строка, обработка изображений.

0 голосов
/ 06 ноября 2019

это звучит как эффект индексированных цветов / палитры из дней VGA (например, плазма, вода и огонь), где вы меняете палитру (определенным образом) и изображение меняется вместе с ней.

Идея состоит в том, чтоВаше изображение / спрайт не содержат цвета RGB напрямую, а вместо этого используют индексы цветов из палитры. Если часть палитры для вашего изображения / спрайта содержит градиент цвета, поэтому градиенты на изображении также являются градиентами на индексе (соседние оттенки имеют также соседние индексы). Многие старые спрайты pixelart и изображения старых времен сделаны таким образом (отсортированная палитра).

Теперь вы можете просто выбрать несколько цветов в этой части палитры и интерполировать остальную часть градиента (линейно или лучше).

Чтобы имитировать это, вам нужно:

  1. иметь индексированный цветной пиксельный рисунок с отсортированной палитрой

    Например, вы можете конвертировать ваше изображение в BMP или GIFс палитрой и сортировать цвета.

  2. определить часть палитры с градиентом цвета

  3. изменить / обновить градиент

  4. перерисовать или перекрасить изображение.

...