Bagaimana untuk menukar nilai Hex kepada nilai RGBA menggunakan JavaScript?-tutorial js-php.cn

Bagaimana untuk menukar nilai Hex kepada nilai RGBA menggunakan JavaScript?

王林

Lepaskan： 2023-08-31 14:01:02

ke hadapan

1528 orang telah melayarinya

如何使用 JavaScript 将 Hex 值转换为 RGBA 值？

Semasa mereka bentuk halaman web, kami menggunakan warna untuk menjadikan halaman web lebih menarik dan menarik. Kami biasanya menggunakan kod heksadesimal untuk mewakili warna, tetapi kadangkala kami perlu menambah ketelusan pada warna, yang boleh dicapai melalui nilai RGBA.

Nilai warna heks diwakili oleh #RRGGBBAA dan nilai warna RGBA diwakili oleh rgba(merah, hijau, biru, alfa). Berikut ialah beberapa contoh nilai RGBA dan HEX -

Input:     #7F11E0
Output:  rgba( 127, 17, 224, 1 )
Input:     #1C14B0
Output: rgba( 28, 20, 176, 1 )

Salin selepas log masuk

Dalam artikel ini, kita akan membincangkan pelbagai cara untuk menukar Hex kepada RGBA menggunakan Javascript.

Gunakan kaedah parseInt dan String.substring
Gunakan penyusunan tatasusunan dan ungkapan biasa

Gunakan kaedah ParseInt dan String.substring

Fungsi

parseInt() menerima dua parameter: rentetan mewakili nombor dan nombor mewakili pangkalan. Ia kemudian menukar rentetan kepada integer dalam pangkalan yang ditentukan dan mengembalikan hasilnya.

Kaedah rentetan.substring digunakan untuk mengekstrak beberapa bahagian rentetan dengan mendapatkan kedudukan mula dan akhir.

Untuk menukar HEX kepada RGBA kami menggunakan langkah berikut.

Simpan # dan gunakan kaedah String.substring untuk mengeluarkan sepasang dua aksara rentetan heks satu demi satu.
Selepas pengekstrakan, gunakan kaedah parseInt untuk menukar setiap pasangan kepada integer. Kami tahu bahawa pasangan ini ialah kod hex, jadi kami perlu menghantar 16 kepada hujah kedua parseInt.
Selepas menukar setiap pasangan kod perenambelasan kepada integer, gabungkannya ke dalam format RGBA.

Contoh

Dalam contoh ini, kami menukar kod hex kepada RGBA.

<!DOCTYPE html>
<html>
<head>
   <title>Convert Hex to RGBA value using JavaScript</title>
</head>
<body>
   <h3>Converting Hex to RGBA value parseInt() and String.substring() methods</h3>
   <p id="input"> Hex Value: </p>
   <p id="output"> RGBA Value: </p>
   <script>
      let hex = "#7F11E0";
      let opacity = "1";
      // Convert each hex character pair into an integer
      let red = parseInt(hex.substring(1, 3), 16);
      let green = parseInt(hex.substring(3, 5), 16);
      let blue = parseInt(hex.substring(5, 7), 16);
      
      // Concatenate these codes into proper RGBA format
      let rgba  = ` rgba(${red}, ${green}, ${blue}, ${opacity})`
      
      // Get input and output fields
      let inp = document.getElementById("input");
      let opt = document.getElementById("output");
      
      // Print the values
      inp.innerHTML += hex;
      opt.innerText += rgba;
   </script>
</body>
</html>

Salin selepas log masuk

Gunakan kaedah Array.map() dan String.match()

Kaedah Javascript Array map() mencipta tatasusunan baharu yang mengandungi hasil panggilan fungsi yang disediakan pada setiap elemen dalam tatasusunan.

Kaedah String.match digunakan untuk mendapatkan semula padanan apabila memadankan rentetan dengan ungkapan biasa.

Untuk menukar HEX kepada RGBA kami menggunakan langkah berikut.

Gunakan ungkapan biasa /ww/g dan kaedah String.match untuk memadankan setiap jujukan dua aksara alfanumerik berturut-turut bagi rentetan perenambelasan.
Anda akan mendapat tiga pasang aksara abjad angka dalam tatasusunan dan menukar aksara ini kepada integer menggunakan kaedah Array.map dan parseInt.

Contoh

Dalam contoh ini, kami menukar kod hex kepada RGBA.

<!DOCTYPE html>
<html>
<head>
   <title>Converting Hex to RGBA value using JavaScript</title>
</head>
<body>
   <h3>Convert Hex to RGBA value using Array.map() and String.match() methods</h3>
   <p id="input"> Hex: </p>
   <p id="output"> RGBA: </p>
   <script>
      let hex = "#7F11E0";
      let opacity = "1";
      
      // Use a regular expression to extract the individual color values from the hex string
      let values = hex.match(/\w\w/g);
      
      // Convert the hex color values to decimal values using parseInt() and store them in r, g, and b
      let [r, g, b] = values.map((k) => parseInt(k, 16)) 
      
      // Create the rgba string using the decimal values and opacity
      let rgba = ` rgba( ${r}, ${g}, ${b}, ${opacity} )`
      
      // Get input and output fields
      let inp = document.getElementById("input");
      let opt = document.getElementById("output");
      
      // Print the values
      inp.innerHTML += hex;
      opt.innerText += rgba;      
   </script>
</body>
</html>

Salin selepas log masuk

Atas ialah kandungan terperinci Bagaimana untuk menukar nilai Hex kepada nilai RGBA menggunakan JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!