Heim > Artikel > Web-Frontend > Wie konvertiere ich einen Hex-Wert mit JavaScript in einen RGBA-Wert?

Wie konvertiere ich einen Hex-Wert mit JavaScript in einen RGBA-Wert?

王林nach vorne: 2023-08-31 14:01:021479Durchsuche

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

Beim Entwerfen von Webseiten verwenden wir Farben, um die Webseiten attraktiver und attraktiver zu gestalten. Normalerweise verwenden wir Hexadezimalcodes zur Darstellung von Farben, aber manchmal müssen wir einer Farbe Transparenz hinzufügen, was durch RGBA-Werte erreicht werden kann.

Hex-Farbwerte werden durch #RRGGBBAA dargestellt und RGBA-Farbwerte werden durch rgba(rot, grün, blau, alpha) dargestellt. Hier sind einige Beispiele für RGBA- und HEX-Werte -

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

In diesem Artikel besprechen wir verschiedene Möglichkeiten zur Konvertierung von Hex in RGBA mithilfe von Javascript.

Verwenden Sie die Methoden parseInt und String.substring
Verwenden Sie Array-Destrukturierung und reguläre Ausdrücke

Verwenden Sie die Methoden ParseInt und String.substring

Die Funktion

parseInt() akzeptiert zwei Parameter: eine Zeichenfolge, die eine Zahl darstellt, und eine Zahl, die die Basis darstellt. Anschließend wird die Zeichenfolge in eine Ganzzahl in der angegebenen Basis konvertiert und das Ergebnis zurückgegeben.

Die Methode

String.substring wird verwendet, um einen Teil einer Zeichenfolge zu extrahieren, indem die Start- und Endpositionen ermittelt werden.

Um HEX in RGBA zu konvertieren, verwenden wir die folgenden Schritte.

Behalten Sie das # bei und verwenden Sie die Methode String.substring, um nacheinander ein Paar aus zwei Zeichen der Hex-Zeichenfolge zu extrahieren.
Verwenden Sie nach der Extraktion die Methode parseInt, um jedes Paar in eine Ganzzahl umzuwandeln. Wir wissen, dass es sich bei diesen Paaren um Hexadezimalcodes handelt, daher müssen wir 16 an das zweite Argument von parseInt übergeben.
Nachdem Sie jedes Paar Hexadezimalcodes in Ganzzahlen konvertiert haben, verketten Sie sie im RGBA-Format.

Beispiel

In diesem Beispiel konvertieren wir Hex-Code in 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>

Verwenden Sie die Methoden Array.map() und String.match()

Die Javascript-Array-map()-Methode erstellt ein neues Array, das die Ergebnisse des Aufrufs der bereitgestellten Funktion für jedes Element im Array enthält.

Die Methode

String.match wird verwendet, um Übereinstimmungen abzurufen, wenn eine Zeichenfolge mit einem regulären Ausdruck abgeglichen wird.

Um HEX in RGBA zu konvertieren, verwenden wir die folgenden Schritte.

Verwenden Sie den regulären Ausdruck /ww/g und die Methode String.match, um jede Folge von zwei aufeinanderfolgenden alphanumerischen Zeichen einer hexadezimalen Zeichenfolge abzugleichen.
Sie erhalten drei Paare alphanumerischer Zeichen in einem Array und konvertieren diese Zeichen mithilfe der Methoden Array.map und parseInt in Ganzzahlen.

Beispiel

In diesem Beispiel konvertieren wir Hex-Code in 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>

Das obige ist der detaillierte Inhalt vonWie konvertiere ich einen Hex-Wert mit JavaScript in einen RGBA-Wert?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Dieser Artikel ist reproduziert unter:tutorialspoint.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen

Vorheriger Artikel：Node.js: Bewältigung der Herausforderungen der asynchronen AusführungNächster Artikel：Node.js: Bewältigung der Herausforderungen der asynchronen Ausführung

In Verbindung stehende Artikel

Mehr sehen