Преобразуйте шестнадцатеричное число в RGBA

Моя скрипка - http://jsbin.com/pitu/1/edit

Я хотел судить легкое шестнадцатеричное число к rgba преобразованию. Когда-либо браузер, который я использовал цвета рендеринга с помощью rgb как значение по умолчанию поэтому при использовании farbtastic палитры цветов, я преобразовываю шестнадцатеричное значение в rgb путем захвата цвета фона шестнадцатеричное значение, генерирует (как rgb по умолчанию = простое преобразование)

Я пытался заменить ) символ к , 1), но это не работало так, я пошел, чтобы просто видеть, как преобразование rgb к rgba будет работать, и я все еще испытываю затруднения.

JQuery

$('.torgb').val($('#color').css('background-color'));
$('.torgba').val().replace(/rgb/g,"rgba");

Цель
enter image description here

Править:

TinyColor Является большим цветным управлением js библиотека, которая делает все, что я хочу здесь и т.д. Я изображаю Вас, парни могут хотеть дать ему попытку! - https://github.com/bgrins/TinyColor

61
задан 22 May 2018 в 03:04

4 ответа

Преобразуйте ШЕСТНАДЦАТЕРИЧНОЕ ЧИСЛО с альфой (ahex) в к rgba.

function ahex_to_rba(ahex) {
    //clean #
    ahex = ahex.substring(1, ahex.length);
    ahex = ahex.split('');

    var r = ahex[0] + ahex[0],
        g = ahex[1] + ahex[1],
        b = ahex[2] + ahex[2],
        a = ahex[3] + ahex[3];

    if (ahex.length >= 6) {
        r = ahex[0] + ahex[1];
        g = ahex[2] + ahex[3];
        b = ahex[4] + ahex[5];
        a = ahex[6] + (ahex[7] ? ahex[7] : ahex[6]);
    }

    var int_r = parseInt(r, 16),
        int_g = parseInt(g, 16),
        int_b = parseInt(b, 16),
        int_a = parseInt(a, 16);


    int_a = int_a / 255;

    if (int_a < 1 && int_a > 0) int_a = int_a.toFixed(2);

    if (int_a || int_a === 0)
        return 'rgba('+int_r+', '+int_g+', '+int_b+', '+int_a+')';
    return 'rgb('+int_r+', '+int_g+', '+int_b+')';
}

Попытка это самостоятельно с отрывком:

function ahex_to_rba(ahex) {
    //clean #
    ahex = ahex.substring(1, ahex.length);
    ahex = ahex.split('');

    var r = ahex[0] + ahex[0],
        g = ahex[1] + ahex[1],
        b = ahex[2] + ahex[2],
        a = ahex[3] + ahex[3];

    if (ahex.length >= 6) {
        r = ahex[0] + ahex[1];
        g = ahex[2] + ahex[3];
        b = ahex[4] + ahex[5];
        a = ahex[6] + (ahex[7] ? ahex[7] : ahex[6]);
    }

    var int_r = parseInt(r, 16),
        int_g = parseInt(g, 16),
        int_b = parseInt(b, 16),
        int_a = parseInt(a, 16);


    int_a = int_a / 255;

    if (int_a < 1 && int_a > 0) int_a = int_a.toFixed(2);

    if (int_a || int_a === 0)
        return 'rgba('+int_r+', '+int_g+', '+int_b+', '+int_a+')';
    return 'rgb('+int_r+', '+int_g+', '+int_b+')';
}


$(function() {
  $('#go').click(function() {
    $('p b').text(ahex_to_rba($('#hex').val()));
  })
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="hex" type="text" value="#ffaaffaa">
<input id="go" type="button" value="Go">

<p>Result: <b></b></p>

Исходный Автор

0
ответ дан 31 October 2019 в 14:45

Попробуйте

// hex - str e.g. "#abcdef"; a - alpha range 0-1; result e.g. "rgba(1,1,1,0)"
let hex2rgba= (hex,a)=> `rgb(${hex.substr(1).match(/../g).map(x=>+`0x${x}`)},${a})`

/// hex - str e.g. "#abcdef"; a - alpha range 0-1; result e.g. "rgba(1,1,1,0)"
let hex2rgba= (hex,a)=> `rgb(${hex.substr(1).match(/../g).map(x=>+`0x${x}`)},${a})`;

function convert() {
  console.log(hex2rgba(inp.value,1));
}
<input id="inp" value="#abcdef" >
<button onclick="convert()">convert</button>
0
ответ дан 31 October 2019 в 14:45

И другой базирующийся вокруг разрядного смещения.

// hex can be a string in the format of "fc9a04", "0xfc9a04" or "#fc90a4" (uppercase digits are allowed) or the equivalent number
// alpha should be 0-1
const hex2rgb = (hex, alpha) => {
  const c = typeof(hex) === 'string' ? parseInt(hex.replace('#', ''), 16)  : hex;
  return `rgb(${c >> 16}, ${(c & 0xff00) >> 8}, ${c & 0xff}, ${alpha})`;
};
1
ответ дан 31 October 2019 в 14:45

Декабрь 2018 - любая Шестнадцатеричная Форма Модульный Подход

основная проблема состоит в том, что по состоянию на 2018 существует несколько форм ШЕСТНАДЦАТЕРИЧНОГО ЧИСЛА. 6 символьных традиционных форм, 3 символа сокращают форму и новые 4 и 8 символьных форм, которые включают альфу (Который только частично поддерживается с сегодняшнего дня). Следующая функция может обработать любую ШЕСТНАДЦАТЕРИЧНУЮ форму.

const isValidHex = (hex) => /^#([A-Fa-f0-9]{3,4}){1,2}$/.test(hex)

const getChunksFromString = (st, chunkSize) => st.match(new RegExp(`.{${chunkSize}}`, "g"))

const convertHexUnitTo256 = (hexStr) => parseInt(hexStr.repeat(2 / hexStr.length), 16)

const getAlphafloat = (a, alpha) => {
    if (typeof a !== "undefined") {return a / 256}
    if (typeof alpha !== "undefined"){
        if (1 < alpha && alpha <= 100) { return alpha / 100}
        if (0 <= alpha && alpha <= 1) { return alpha }
    }
    return 1
}

export const hexToRGBA = (hex, alpha) => {
    if (!isValidHex(hex)) {throw new Error("Invalid HEX")}
    const chunkSize = Math.floor((hex.length - 1) / 3)
    const hexArr = getChunksFromString(hex.slice(1), chunkSize)
    const [r, g, b, a] = hexArr.map(convertHexUnitTo256)
    return `rgba(${r}, ${g}, ${b}, ${getAlphafloat(a, alpha)})`
}

Примечание, которое альфа могла быть предоставлена функции любым из следующих способов:

  1. Как часть 4 или 8 ШЕСТНАДЦАТЕРИЧНЫХ ЧИСЕЛ формы.
  2. Как второй параметр между 0-1,
  3. Как второй параметр между 1-100

OutPut

    const c1 = "#f80"
    const c2 = "#f808"
    const c3 = "#0088ff"
    const c4 = "#0088ff88"
    const c5 = "#98736"

    console.log(hexToRGBA(c1))   //  rgba(255, 136, 0, 1)
    console.log(hexToRGBA(c2))   //  rgba(255, 136, 0, 0.53125)
    console.log(hexToRGBA(c3))   //  rgba(0, 136, 255, 1)
    console.log(hexToRGBA(c4))   //  rgba(0, 136, 255, 0.53125)
    console.log(hexToRGBA(c5))   //  Uncaught Error: Invalid HEX

    console.log(hexToRGBA(c1, 0.5))   //  rgba(255, 136, 0, 0.5)
    console.log(hexToRGBA(c1, 50))   //  rgba(255, 136, 0, 0.5)
    console.log(hexToRGBA(c3, 0.5))   //  rgba(0, 136, 255, 0.5)
    console.log(hexToRGBA(c3, 50))   //  rgba(0, 136, 255, 0.5)
    console.log(hexToRGBA(c3, 120))   //  rgba(0, 136, 255, 1)
5
ответ дан 31 October 2019 в 14:45

Другие вопросы по тегам:

Похожие вопросы: