Saya telah sibuk menyelesaikan kebutuhan bisnis baru -baru ini dan sudah lama tidak menulis blog. Saya punya sedikit waktu hari ini dan melihat beberapa kode front-end dalam proyek terbaru. Ketika saya melihat fungsi konversi warna web, saya tiba -tiba berpikir bahwa ketika kami melakukan beberapa pengaturan warna/persyaratan pengeditan, itu sering melibatkan pertukaran berbagai format nilai warna. Jadi saya memutuskan untuk merekam bagaimana saya menerapkan bagian fungsi ini, menuliskannya dan membaginya dengan Anda, dan berharap bahwa pembaca akan mengekspresikan pendapat mereka dan berkomunikasi lebih banyak.
Lihatlah masalahnya dulu
Pertanyaan 1. Ketika kami mengembangkan halaman web front-end, kami sering menggunakan dom.style.backgroundcolor = "#f00" untuk mengatur warna latar belakang elemen DOM. Kami juga akan menggunakan kode yang serupa (mengapa sama? Ada banyak kasus, jadi kami dapat dengan bebas menggunakan imajinasi kami di sini) var bgc = dom.style.backgroundColor untuk mendapatkan warna latar belakang elemen DOM. Jadi pertanyaannya adalah, silakan lihat gambar di bawah ini:
Jika perbandingan di sini tidak cukup jelas, mari kita terus lihat:
Jelas, nilai warna yang sama harus sama, tetapi hasilnya tidak. Ini bukan kasus yang terisolasi. Hasil yang saya dapatkan dalam alat pengembangan krom dan konsol Firefox adalah sama.
Pertanyaan 2: Pengembangan front-end sering dimulai dengan memulihkan draf desain UI. Selama proses pengkodean, kami sering menemukan desain seperti itu: warna latar belakang kotak solid (dengan asumsi: #f00), tetapi dengan 75% opacity. Jelas, kita tidak bisa begitu saja mengatur situasi ini melalui dom.style.backgroundColor = "#f00" karena efek tembus dapat dicapai. Saat kita berbalik, kita tahu bahwa ada hal RGBA di CSS3, yang berarti kita dapat mengatur warna latar belakang yang tembus cahaya melalui dom.style.backgroundcolor = "rgba (255, 0, 0, 0.75)" dengan cara ini. Lalu, pertanyaannya adalah lagi: Konversi ini mudah dilakukan di Photoshop, tetapi jika kita berada di JavaScript, bagaimana kita harus mengonversi ("#f00", 75) ke RGBA (255, 0, 0, 0.75)?
Selanjutnya, mari kita lihat bagaimana saya melakukannya.
RGB (A) Nilai warna dikonversi menjadi warna hex (hex)
Mereka semua untuk pengembangan, kami mengerti! Lebih baik hanya mengunggah kode secara langsung, tetapi inilah bagian dari yang asli:
<!-Lang: JS->
Salinan kode adalah sebagai berikut:
var rgbtohex = function (rgb) {
var rrgb =/rgb/((/d {1,3}), (/d {1,3}), (/d {1,3})/)/,
rrgba = /rgba/((/d {1,3 --) ,(/d {1,3}) ,(/d {1,3 --) ,(ace/d.com+ )/)/,
r, g, b, a, rs = rgb.replace (// s+/g, "") .match (rrgb),
rsa = rgb.replace (// s+/g, "") .match (rrgba);
if (rs) {
r = (+rs [1]). Tostring (16);
r = r.length == 1? "0" + r: r;
g = (+rs [2]). Tostring (16);
g = g.length == 1? "0" + g: g;
b = (+rs [3]). Tostring (16);
b = b.length == 1? "0" + B: B;
return {hex: "#" + r + g + b, alpha: 100};
} lain jika (rsa) {
r = (+rsa [1]). Tostring (16);
r = r.length == 1? "0" + r: r;
g = (+RSA [2]). Tostring (16);
g = g.length == 1? "0" + g: g;
B = (+RSA [3]). Tostring (16);
b = b.length == 1? "0" + B: B;
a = (+rsa [4]) * 100
return {hex: "#" + r + g + b, alpha: math.ceil (a)};
} kalau tidak {
return {hex: rgb, alpha: 100};
}
};
Mengapa ini yang paling primitif? Karena ketika saya meninjau kode hari ini, saya menemukan bahwa masih ada ruang untuk evolusi di sini. Mari kita bandingkan kode yang berevolusi (dioptimalkan):
<!-Lang: JS->
Salinan kode adalah sebagai berikut:
var rgbtohex = function (rgb) {
var rrgba = /rgba?/(/d {1,3 --) ,(/d {1,3 --) ,(/d {1,3 --)(,($ 0./d media+)) ??/)/,
r, g, b, a
rsa = rgb.replace (// s+/g, "") .match (rrgba);
if (rsa) {
r = (+rsa [1]). Tostring (16);
r = r.length == 1? "0" + r: r;
g = (+RSA [2]). Tostring (16);
g = g.length == 1? "0" + g: g;
B = (+RSA [3]). Tostring (16);
b = b.length == 1? "0" + B: B;
A = (+(RSA [5]? RSA [5]: 1)) * 100
return {hex: "#" + r + g + b, alpha: math.ceil (a)};
} kalau tidak {
return {hex: rgb, alpha: 100};
}
};
Belum lagi ada satu jika cabang hilang, jelas dari perspektif volume kode saja! Selanjutnya, mari kita lihat apakah hasil konversi adalah seperti yang kita inginkan, dan untuk ini saya mengeksekusi beberapa baris kode yang ditunjukkan pada gambar berikut di konsol:
Menilai dari hasil eksekusi, metode kami tampaknya telah mencapai tujuan kami. Namun, teman -teman yang cermat harus memperhatikan bahwa ada dua panah merah di gambar. Apakah ada jebakan di sini? Bagus. Mari kita lihat lebih dekat pada parameter warna RGB (255, 0, 0, 2) lulus di panah pertama. Bahkan, ini bukan nilai warna hukum. Nilai warna dalam format RGB tidak memiliki parameter keempat (transparansi); Kemudian lihat panah kedua RGBA (255, 0, 0, 1.48) di panah kedua. Tidak ada masalah dengan format di sini, tetapi transparansi adalah 1,48, yang sebenarnya bukan nilai transparansi hukum. Metode kami telah dieksekusi secara normal dan dikembalikan secara normal, menunjukkan bahwa metode kami masih memiliki ruang untuk evolusi lebih lanjut, jadi kami akan menyerahkannya kepada semua orang untuk melakukan!
Konversi warna hex (hex) menjadi format RGBA
Dalam pengembangan sehari -hari, nilai warna yang paling sering kami gunakan adalah nilai warna dalam format heksadesimal ( #FF0000, #f00, dll.). Jika kita perlu mengonversinya ke format RGBA saat menggunakan nilai warna, apa yang harus kita lakukan?
<!-Lang: JS->
Salinan kode adalah sebagai berikut:
var hextorgba = fungsi (hex, al) {
var hexcolor = /^#/.test(hex)? hex.slice (1): hex,
alp = hex === 'transparan'? 0: Math.Ceil (Al),
r, g, b;
hexcolor = /^ media0-9a-fuarkan {3}| media0-9a-fuarkan {6}/i.test(hexcolor)? hexcolor: 'ffffff';
if (hexcolor.length === 3) {
hexcolor = hexcolor.replace (//w) (/w) (/w)/gi, '$ 1 $ 1 $ 2 $ 2 $ 3 $ 3');
}
r = hexcolor.slice (0, 2);
g = hexcolor.slice (2, 4);
b = hexcolor.slice (4, 6);
r = parseInt (r, 16);
g = parseInt (g, 16);
b = parseint (b, 16);
kembali {
hex: '#' + hexcolor,
Alpha: ALP,
rgba: 'rgba (' + r + ',' + g + ',' + b + ',' + (alp / 100) .tofixed (2) + ')'
};
};
Demikian pula, kami juga menulis kode verifikasi untuk menguji apakah konversi kami normal:
Menilai dari hasil eksekusi, metode kami tidak memiliki masalah dan bisa mendapatkan hasil konversi yang kami inginkan. Tapi di sini kita masih meninggalkan dua panah merah, transparansi ilegal dan nilai warna ilegal. Bagian dari fungsi evolusi ini juga ditinggalkan untuk semua orang, haha ...
Akhirnya, konversi timbal balik antara nilai warna halaman web sebenarnya merupakan masalah klise. Saya baru saja mendaftarkan salah satunya di sini. Saya percaya ada lebih banyak metode yang lebih baik untuk digunakan. Setiap orang dipersilakan untuk mengusulkannya, berkomunikasi dan membuat kemajuan bersama ~~