Maison > Article > interface Web > Comment convertir une valeur hexadécimale en valeur RGBA à l'aide de JavaScript ?

Comment convertir une valeur hexadécimale en valeur RGBA à l'aide de JavaScript ?

王林avant: 2023-08-31 14:01:021522parcourir

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

Lors de la conception de pages Web, nous utilisons des couleurs pour rendre les pages Web plus attrayantes et attrayantes. Nous utilisons généralement des codes hexadécimaux pour représenter les couleurs, mais nous devons parfois ajouter de la transparence à une couleur, ce qui peut être obtenu grâce aux valeurs RGBA.

Les valeurs de couleur hexadécimales sont représentées par #RRGGBBAA et les valeurs de couleur RGBA sont représentées par rgba(rouge, vert, bleu, alpha). Voici quelques exemples de valeurs RGBA et HEX -

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

Dans cet article, nous aborderons différentes façons de convertir Hex en RGBA à l'aide de Javascript.

Utilisez les méthodes parseInt et String.substring
Utilisez la déstructuration de tableaux et les expressions régulières

Utilisez les méthodes ParseInt et String.substring

La fonction

parseInt() accepte deux paramètres : une chaîne représentant un nombre et un nombre représentant la base. Il convertit ensuite la chaîne en entier dans la base spécifiée et renvoie le résultat.

La méthode String.substring est utilisée pour extraire une partie d'une chaîne en obtenant les positions de début et de fin.

Pour convertir HEX en RGBA, nous utilisons les étapes suivantes.

Conservez le # et utilisez la méthode String.substring pour extraire une paire de deux caractères de la chaîne hexadécimale un par un.
Après l'extraction, utilisez la méthode parseInt pour convertir chaque paire en entier. Nous savons que ces paires sont des codes hexadécimaux, nous devons donc passer 16 au deuxième argument de parseInt.
Après avoir converti chaque paire de codes hexadécimaux en entiers, concaténez-les au format RGBA.

Exemple

Dans cet exemple, nous convertissons le code hexadécimal en 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>

Utilisez les méthodes Array.map() et String.match()

La méthode Javascript Array map() crée un nouveau tableau contenant les résultats de l'appel de la fonction fournie sur chaque élément du tableau.

La méthode String.match est utilisée pour récupérer des correspondances lors de la correspondance d'une chaîne avec une expression régulière.

Pour convertir HEX en RGBA, nous utilisons les étapes suivantes.

Utilisez l'expression régulière /ww/g et la méthode String.match pour faire correspondre chaque séquence de deux caractères alphanumériques consécutifs d'une chaîne hexadécimale.
Vous obtiendrez trois paires de caractères alphanumériques dans un tableau et convertirez ces caractères en entiers à l'aide des méthodes Array.map et parseInt.

Exemple

Dans cet exemple, nous convertissons le code hexadécimal en 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>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer

Article précédent：Node.js : Relever les défis de l'exécution asynchroneArticle suivant：Node.js : Relever les défis de l'exécution asynchrone

Articles Liés

Voir plus