Как получить цвет фона элемента (установленный в RGBA) в Javascript?

Question

У меня есть элемент с идентификатором box, у которого цвет фона установлен на rgba(0, 0, 0, 0.3) на белом фоне. Вот так:

#box {
  width: 100px;
  height: 100px;
  margin: 10px;
  background-color: rgba(0, 0, 0, 0.3);
}

<div id="box"></div>

Используя палитру цветов, я вижу, что цвет коробки в шестнадцатеричном виде равен #b2b2b2. Теперь, что я хочу знать, есть ли способ получить этот шестнадцатеричный код, используя JavaScript без преобразования RGBA в hex формат? Я прочитал о функции getComputedStyle, но не смог заставить ее работать. Любая помощь очень ценится.

Answer 1

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

/* Utility function that you can easily find in the net */
function extractRgb (css) {
  return css.match(/[0-9.]+/gi)
}
function rgbToHex(r, g, b) {
  return "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
}
/**/

var c = window.getComputedStyle(document.getElementById('box')).backgroundColor;
c = extractRgb(c);

for(var i=0;i<3;i++)
  c[i] = parseInt(c[i]*c[3] + 255*(1 - c[3])); /* Check the linked answer for details */

console.log(rgbToHex(c[0],c[1],c[2]) )

#box {
  width: 100px;
  height: 100px;
  margin: 10px;
  background-color: rgba(0, 0, 0, 0.3);
}

<div id="box"></div>

Сценарий может быть легко улучшен, но основная идея заключается в формуле, используемой для вычисления результата между двумя цветами:

ColorF = (ColorT*opacityT + ColorB*OpacityB*(1 - OpacityT)) / factor

ColorF - наш последний цвет. ColorT / ColorB - соответственно верхний и нижний цвета. opacityT / opacityB - соответственно верхняя и нижняя непрозрачности, определенные для каждого цвета:

Коэффициент определяется по этой формуле OpacityT + OpacityB*(1 - OpacityT).

Answer 2

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

Как я уже сказал в комментарии, у вас есть # box, определенный полупрозрачным черным цветом. В зависимости от того, что это за элемент «позади», ваша палитра цветов будет читать что-то совсем другое (сравните, скажем, красный фон и белый фон позади вашего #box).

Я действительно не знаю, как приступим к получению реального визуализированного цвета, но я бы начал смотреть на такие вещи, я полагаю: https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/readPixels

Надеюсь, это поможет.

Answer 3

Проверьте это:

$(document).ready(function(){
  alert(componentToHex($('#box').css('background-color')));
});

function componentToHex(c) {
  var hex = c.toString(16);
  return hex.length == 1 ? "0" + hex : hex;
}

function rgbToHex(r, g, b) {
  return "#" + componentToHex(r) + componentToHex(g) + componentToHex(b);
}

alert(rgbToHex(0, 51, 255));

#box {
  width: 100px;
  height: 100px;
  margin: 10px;
  background-color: rgba(0, 0, 0, 0.3);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div id="box"></div>