Decodificador i visualitzador d'imatges Base64 | Converteix Base64 a imatges
Decodifica i visualitza immediatament cadenes d'imatges codificades en base64. Suporta JPEG, PNG, GIF i altres formats comuns amb gestió d'errors per a entrades no vàlides.
Decodificador i visualitzador d'imatges Base64
Enganxa una cadena d'imatge codificada en base64 i decodifica-la per veure la imatge.
Previsualització de la imatge
No hi ha cap imatge per mostrar. Enganxa una cadena base64 per veure-la decodificada automàticament.
Admet formats JPEG, PNG, GIF i altres formats d'imatge comuns.
Instruccions
1. Enganxa una cadena d'imatge codificada en base64 a l'àrea de text superior.
2. La imatge es decodificarà automàticament mentre escrius, o fes clic al botó 'Decodificar imatge'.
3. La imatge decodificada apareixerà a l'àrea de previsualització a continuació.
Nota: La cadena hauria de començar amb 'data:image/' per obtenir els millors resultats, però l'eina intentarà decodificar cadenes sense aquest prefix també.
Documentació
Decodificador i visualitzador d'imatges Base64
Introducció
Base64 és un esquema d'encoding de binari a text que representa dades binàries en un format de cadena ASCII. S'utilitza comunament per incrustar dades d'imatge directament dins de HTML, CSS, JavaScript, JSON i altres formats basats en text on les dades binàries no es poden incloure directament. Aquesta eina et permet decodificar cadenes d'imatge codificades en base64 i veure les imatges resultants directament al teu navegador.
L'encoding en Base64 augmenta la mida de les dades aproximadament un 33% en comparació amb el binari original, però permet que les imatges s'incloguin directament en documents basats en text sense requerir descàrregues de fitxers separats. Això pot ser particularment útil per a imatges petites com icones, logotips o gràfics simples on la comoditat d'incrustar supera l'augment de mida.
La nostra eina de decodificació d'imatges Base64 proporciona una interfície senzilla on pots enganxar una cadena d'imatge codificada en base64 i veure instantàniament la imatge decodificada. Admet tots els formats d'imatge comuns, incloent JPEG, PNG, GIF, WebP i SVG, i pot gestionar tant el format de URL de dades (amb el prefix data:image/...) com cadenes de base64 en brut.
Detalls tècnics
Format d'encoding Base64
L'encoding Base64 converteix dades binàries en un conjunt de 64 caràcters ASCII (A-Z, a-z, 0-9, +, i /), amb = utilitzat per al padding. Per a imatges a la web, les dades en base64 normalment es formaten com una URL de dades amb l'estructura següent:
1data:[<tipus de mitjà>][;base64],<dades>
2Per exemple, una imatge PNG codificada en base64 podria semblar:
1data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==
2Els components d'aquest format són:
data:- L'esquema de URLimage/png- El tipus MIME de les dades;base64- El mètode d'encoding,- Un delimitador entre l'encapçalament i les dades- Les dades codificades en base64
Procés de decodificació
En decodificar una cadena d'imatge en base64, es produeixen els següents passos:
- La cadena es analiza per identificar si conté un prefix de URL de dades
- Si existeix un prefix, s'extreu el tipus MIME per determinar el format de la imatge
- La porció de dades en base64 es aïlla i es decodifica en dades binàries
- Les dades binàries es converteixen en un Blob o una URL d'objecte que es pot mostrar com una imatge
Si l'entrada no inclou un prefix de URL de dades, el decodificador intenta tractar-la com a dades en base64 en brut i infereix el tipus d'imatge de l'encapçalament binari decodificat o es predetermina a PNG.
Formats d'imatge compatibles
Aquesta eina admet tots els formats d'imatge comuns a la web:
| Format | Tipus MIME | Casos d'ús típics |
|---|---|---|
| JPEG | image/jpeg | Fotos, imatges complexes amb molts colors |
| PNG | image/png | Imatges que requereixen transparència, captures de pantalla, gràfics |
| GIF | image/gif | Animacions simples, imatges de color limitat |
| WebP | image/webp | Format modern amb millor compressió que JPEG/PNG |
| SVG | image/svg+xml | Gràfics vectorials, icones i il·lustracions escalables |
Casos d'ús
Les imatges codificades en base64 tenen diversos casos d'ús pràctics en el desenvolupament web i més enllà:
-
Incrustar imatges en HTML/CSS/JS: Redueix les sol·licituds HTTP incloent imatges directament al teu codi, la qual cosa pot millorar els temps de càrrega de pàgina per a imatges petites.
-
Plantilles de correu electrònic: Assegura que les imatges es mostrin correctament en clients de correu electrònic que bloquegen imatges externes per defecte.
-
Aplicacions de fitxer únic: Crea aplicacions HTML autoconcontingudes on tots els recursos s'incrusten dins d'un sol fitxer.
-
Respostes d'API: Inclou dades d'imatge directament en respostes JSON sense requerir punts finals d'imatge separats.
-
URL de dades en CSS: Incrusta icones petites i imatges de fons directament en fitxers CSS.
-
Manipulacions de Canvas: Facilita la guarda i transferència de dades d'imatge de canvas.
-
Aplicacions fora de línia: Emmagatzema imatges com cadenes de text en localStorage o IndexedDB.
Consideracions de rendiment
Si bé l'encoding en base64 ofereix comoditat, ve amb inconvenients:
- Mida de fitxer augmentada: L'encoding en base64 augmenta la mida de les dades aproximadament un 33%.
- Sense emmagatzematge en caché del navegador: Les imatges incrustades no es poden emmagatzemar en caché per separat com els fitxers d'imatge externs.
- Sobrecàrrega de parsing: Els navegadors han de decodificar la cadena en base64 abans de renderitzar.
- Desafiaments de manteniment: Les imatges incrustades són més difícils d'actualitzar que els fitxers referenciats.
Per a un rendiment òptim, l'encoding en base64 es recomana generalment només per a imatges petites (menys de 10KB). Les imatges més grans solen ser millor servides com a fitxers separats que es poden emmagatzemar en caché i optimitzar adequadament.
Alternatives
Diverses alternatives a l'encoding en base64 existeixen per a diferents casos d'ús:
-
Incrustació SVG en línia: Per a gràfics vectorials, l'SVG en línia sovint proporciona millor rendiment i flexibilitat que l'SVG codificat en base64.
-
WebP i formats d'imatge moderns: Aquests proporcionen millor compressió que JPEG/PNG codificats en base64.
-
Sprites d'imatge: Combina diverses imatges petites en un sol fitxer i utilitza posicionament CSS.
-
CDNs (Xarxes de Distribució de Contingut): Per a llocs de producció, servir imatges optimitzades des d'un CDN és sovint més eficient.
-
Compressió de dades: Per a la transferència de grans quantitats de dades binàries, els algoritmes de compressió especialitzats com gzip o Brotli són més eficients que l'encoding en base64.
Exemples de codi
Aquí hi ha exemples de treballar amb imatges codificades en base64 en diversos llenguatges de programació:
1// Convertir una imatge a base64 en JavaScript (navegador)
2function imageToBase64(imgElement) {
3 const canvas = document.createElement('canvas');
4 canvas.width = imgElement.width;
5 canvas.height = imgElement.height;
6
7 const ctx = canvas.getContext('2d');
8 ctx.drawImage(imgElement, 0, 0);
9
10 // Obtenir com a URL de dades (cadena en base64)
11 return canvas.toDataURL('image/png');
12}
13
14// Mostrar una imatge en base64
15function displayBase64Image(base64String) {
16 const img = new Image();
17
18 // Gestionar cadenes sense prefix de URL de dades
19 if (!base64String.startsWith('data:')) {
20 base64String = `data:image/png;base64,${base64String}`;
21 }
22
23 img.src = base64String;
24 document.body.appendChild(img);
25}
261import base64
2from PIL import Image
3from io import BytesIO
4
5# Convertir un fitxer d'imatge a base64
6def image_to_base64(image_path):
7 with open(image_path, "rb") as image_file:
8 encoded_string = base64.b64encode(image_file.read())
9 return encoded_string.decode('utf-8')
10
11# Convertir base64 a imatge i guardar
12def base64_to_image(base64_string, output_path):
13 # Eliminar prefix de URL de dades si està present
14 if ',' in base64_string:
15 base64_string = base64_string.split(',')[1]
16
17 image_data = base64.b64decode(base64_string)
18 image = Image.open(BytesIO(image_data))
19 image.save(output_path)
20
21# Exemple d'ús
22base64_str = image_to_base64("input.jpg")
23print(f"data:image/jpeg;base64,{base64_str[:30]}...") # Imprimir inici de la cadena
24
25base64_to_image(base64_str, "output.jpg")
261<?php
2// Convertir un fitxer d'imatge a base64 en PHP
3function imageToBase64($path) {
4 $type = pathinfo($path, PATHINFO_EXTENSION);
5 $data = file_get_contents($path);
6 return 'data:image/' . $type . ';base64,' . base64_encode($data);
7}
8
9// Convertir base64 a imatge i guardar
10function base64ToImage($base64String, $outputPath) {
11 // Extreure les dades binàries codificades en base64
12 $imageData = explode(',', $base64String);
13 $imageData = isset($imageData[1]) ? $imageData[1] : $imageData[0];
14
15 // Decodificar i guardar
16 $data = base64_decode($imageData);
17 file_put_contents($outputPath, $data);
18}
19
20// Exemple d'ús
21$base64Image = imageToBase64('input.jpg');
22echo substr($base64Image, 0, 50) . "...\n"; // Imprimir inici de la cadena
23
24base64ToImage($base64Image, 'output.jpg');
25?>
261import java.io.File;
2import java.io.FileOutputStream;
3import java.io.IOException;
4import java.nio.file.Files;
5import java.util.Base64;
6
7public class Base64ImageUtil {
8
9 // Convertir un fitxer d'imatge a base64
10 public static String imageToBase64(String imagePath) throws IOException {
11 File file = new File(imagePath);
12 byte[] fileContent = Files.readAllBytes(file.toPath());
13 String extension = imagePath.substring(imagePath.lastIndexOf(".") + 1);
14 String base64String = Base64.getEncoder().encodeToString(fileContent);
15
16 return "data:image/" + extension + ";base64," + base64String;
17 }
18
19 // Convertir base64 a imatge i guardar
20 public static void base64ToImage(String base64String, String outputPath) throws IOException {
21 // Eliminar prefix de URL de dades si està present
22 if (base64String.contains(",")) {
23 base64String = base64String.split(",")[1];
24 }
25
26 byte[] decodedBytes = Base64.getDecoder().decode(base64String);
27
28 try (FileOutputStream fos = new FileOutputStream(outputPath)) {
29 fos.write(decodedBytes);
30 }
31 }
32
33 public static void main(String[] args) throws IOException {
34 String base64Image = imageToBase64("input.jpg");
35 System.out.println(base64Image.substring(0, 50) + "..."); // Imprimir inici de la cadena
36
37 base64ToImage(base64Image, "output.jpg");
38 }
39}
401using System;
2using System.IO;
3using System.Text.RegularExpressions;
4
5class Base64ImageConverter
6{
7 // Convertir un fitxer d'imatge a base64
8 public static string ImageToBase64(string imagePath)
9 {
10 byte[] imageBytes = File.ReadAllBytes(imagePath);
11 string base64String = Convert.ToBase64String(imageBytes);
12
13 string extension = Path.GetExtension(imagePath).TrimStart('.').ToLower();
14 return $"data:image/{extension};base64,{base64String}";
15 }
16
17 // Convertir base64 a imatge i guardar
18 public static void Base64ToImage(string base64String, string outputPath)
19 {
20 // Eliminar prefix de URL de dades si està present
21 if (base64String.Contains(","))
22 {
23 base64String = base64String.Split(',')[1];
24 }
25
26 byte[] imageBytes = Convert.FromBase64String(base64String);
27 File.WriteAllBytes(outputPath, imageBytes);
28 }
29
30 static void Main()
31 {
32 string base64Image = ImageToBase64("input.jpg");
33 Console.WriteLine(base64Image.Substring(0, 50) + "..."); // Imprimir inici de la cadena
34
35 Base64ToImage(base64Image, "output.jpg");
36 }
37}
381require 'base64'
2
3# Convertir un fitxer d'imatge a base64
4def image_to_base64(image_path)
5 extension = File.extname(image_path).delete('.')
6 base64_data = Base64.strict_encode64(File.read(image_path))
7 "data:image/#{extension};base64,#{base64_data}"
8end
9
10# Convertir base64 a imatge i guardar
11def base64_to_image(base64_string, output_path)
12 # Eliminar prefix de URL de dades si està present
13 if base64_string.include?(',')
14 base64_string = base64_string.split(',')[1]
15 end
16
17 File.open(output_path, 'wb') do |file|
18 file.write(Base64.decode64(base64_string))
19 end
20end
21
22# Exemple d'ús
23base64_image = image_to_base64('input.jpg')
24puts base64_image[0, 50] + '...' # Imprimir inici de la cadena
25
26base64_to_image(base64_image, 'output.jpg')
271' Funció VBA d'Excel per codificar un fitxer a base64
2Function FileToBase64(filePath As String) As String
3 Dim fileNum As Integer
4 Dim fileData() As Byte
5 Dim objXML As Object
6 Dim objNode As Object
7
8 fileNum = FreeFile
9 Open filePath For Binary Access Read As fileNum
10 ReDim fileData(LOF(fileNum) - 1)
11 Get fileNum, , fileData
12 Close fileNum
13
14 Set objXML = CreateObject("MSXML2.DOMDocument")
15 Set objNode = objXML.createElement("b64")
16
17 objNode.DataType = "bin.base64"
18 objNode.nodeTypedValue = fileData
19
20 FileToBase64 = objNode.Text
21
22 Set objNode = Nothing
23 Set objXML = Nothing
24End Function
25
26' Ús a Excel:
27' =FileToBase64("C:\path\to\image.jpg")
28Implementació HTML
Aquí tens com incrustar una imatge en base64 directament a HTML:
1<!-- Incrustant una imatge en base64 directament a HTML -->
2<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Imatge codificada en base64">
3
4<!-- Utilitzant CSS amb una imatge de fons en base64 -->
5<style>
6.base64-bg {
7 background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==');
8 width: 100px;
9 height: 100px;
10}
11</style>
12<div class="base64-bg"></div>
13Història
L'encoding en base64 té les seves arrels en el desenvolupament de sistemes de correu electrònic als anys 70. Va ser dissenyat per resoldre el problema de transmetre dades binàries a través de sistemes que estaven dissenyats només per manejar text ASCII.
L'esquema d'encoding es va formalitzar el 1987 amb la publicació de l'RFC 989, que definia l'estàndard de Privacy Enhanced Mail (PEM). Això es va actualitzar més tard en l'RFC 1421 i altres estàndards relacionats. El terme "base64" prové del fet que l'encoding utilitza 64 caràcters ASCII diferents per representar dades binàries.
En el context del desenvolupament web, l'encoding d'imatges en base64 va guanyar popularitat amb l'aparició de les URL de dades, que es van proposar per primera vegada en l'RFC 2397 el 1998. Això va permetre que les dades binàries s'incloguessin directament en HTML, CSS i altres documents web.
L'ús d'imatges codificades en base64 en el desenvolupament web es va fer més estès a mitjans dels anys 2000 a mesura que els desenvolupadors buscaven maneres de reduir les sol·licituds HTTP i millorar els temps de càrrega de pàgina. La tècnica va ser particularment acceptada durant l'augment del desenvolupament web mòbil, on minimitzar les sol·licituds era crucial per al rendiment en connexions mòbils més lentes.
Avui dia, l'encoding en base64 continua sent una eina important en el desenvolupament web, tot i que el seu ús s'ha convertit en més selectiu a mesura que les millors pràctiques han evolucionat. Les aproximacions modernes tendeixen a utilitzar l'encoding en base64 selectivament per a imatges petites i crítiques mentre aprofiten mètodes de lliurament més eficients com HTTP/2 per a actius més grans.
Referències
Comentaris
Fes clic a la notificació de comentaris per començar a donar comentaris sobre aquesta eina
Eines relacionades
Descobreix més eines que podrien ser útils per al teu flux de treball