Объединение цветов с помощью javascript

ProgramBox

Объединение цветов с помощью javascript

Post author:admin
Запись опубликована:20 апреля, 2023
Post category:Вопросы по программированию

#javascript

Вопрос:

Допустим, у меня есть некоторый элемент с цветами фона и переднего плана.
Допустим, могут быть оба цвета, указанные в разных форматах (любых, которые могут быть указаны в атрибуте style), например background = ‘белый’ или ‘прозрачный’, foreground = ‘rgb (0, 0, 0)’.
Какой самый простой способ объединить эти цвета, используя чистый javascript, чтобы получить результат, подобный rgb (128, 128, 128)?

Спасибо.

Ответ №1:

Я полагаю, что установка opacity атрибута CSS на половину ( 0.5 ) элемента спереди приведет вас к этому.

В качестве альтернативы, если вы используете jQuery и вы действительно хотите перенести это в JavaScript, вы можете получить оба цвета с помощью jQuery .css(), который возвращает что-то вроде rgb(0,0,0) , затем вычислите средние значения каждого базового цвета (красный, зеленый, синий) и установите результирующее значение на то, что вам нужно, с помощью той же директивы ( .css() ).

Помогло ли это?

1. 1 — вы должны установить обе непрозрачности равными .5, в противном случае отображаемый цвет будет темнее, чем фактическое слияние двух

2. Согласен, это намного проще, чем мой ответ, и должно сработать для ваших целей.

3. @trey Я не согласен (кстати. спасибо за положительный отзыв). Я сделал тест, который показывает мне, что если я установлю непрозрачность как первого, так и второго элемента равным .5, это на самом деле будет светлее, но также светлее, чем цвет, который мы хотим получить (настройка непрозрачности первого элемента сработала для меня). У вас есть какой-нибудь пример, доказывающий обратное? Если вы это сделаете, я исправлю свой ответ.

4. .css() может возвращать строку ‘transparent’ в результате

5. по моему опыту работы с графикой, два перекрывающихся цвета, оба с 50% непрозрачностью, создают разную цветовую секцию, которая имеет 100% непрозрачность. Из этого следует, что чем более насыщенная область слияния, тем дальше от фактического смешанного цвета она будет, и наоборот

Ответ №2:

Просто потому, что мне нравится писать сложные скрипты….

 <span style="background-color:black; color:#fff";>Hi</span>

JS:

 function getColorVals(color) {
    color = color.replace("rgb", "").replace("(", "").replace(")", "");
    return color.split(",");
}
var span = document.getElementsByTagName("span")[0];
var color1 = window.getComputedStyle(span).backgroundColor; //window.getComputedStyle ensures getting back rgb
var color2 = window.getComputedStyle(span).color;
var color1Vals = getColorVals(color1);
var color2Vals = getColorVals(color2);
var newColorVal = "rgb(";
for (i = 0; i < 3; i  ) {
    newColorVal  = Math.round((Math.abs(color1Vals[i] - color2Vals[i]) / 2));
    if(i<2) newColorVal  = ",";
} 
newColorVal  = ")";
alert(newColorVal);

… вы также могли бы легко изменить непрозрачность там.

Редактировать:

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

1. window.getComputedStyle(span).backgroundColor может возвращать строку ‘transparent’ в результате

2. @Михаил Адамович да, я не включил поддержку прозрачности. Вы могли бы легко перехватить «прозрачный» и заменить его чем-то другим или использовать rgba вместо rgb (в этом случае значением rgba для transparent было бы «rgba(0,0,0,0)»

Ответ №3:

Возможно, вы захотите изучитьrbgcolor.js. Он «принимает строку и пытается определить из нее допустимый цвет». То есть вы могли бы просто посмотреть на атрибут CSS color элемента, передать его через этот JS и получить значения RGB. Как только у вас будут значения RGB, просто возьмите среднее значение каждого канала, чтобы создать свой новый цвет.

Возможно, вам придется внести некоторые коррективы, если цвет вашего элемента наследуется. например, если у вашего элемента нет указанного свойства color, проверьте, является ли он родительским, вплоть до DOM.