Моя скрипка - 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");
Цель
Править:
TinyColor Является большим цветным управлением js библиотека, которая делает все, что я хочу здесь и т.д. Я изображаю Вас, парни могут хотеть дать ему попытку! - https://github.com/bgrins/TinyColor
Преобразуйте ШЕСТНАДЦАТЕРИЧНОЕ ЧИСЛО с альфой (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>
Попробуйте
// 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>
И другой базирующийся вокруг разрядного смещения.
// 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})`;
};
основная проблема состоит в том, что по состоянию на 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)})`
}
Примечание, которое альфа могла быть предоставлена функции любым из следующих способов:
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)