Base64 a imatge
Enganxa les fotografies a l' esquerra
Converteix dades codificades en Base64 a imatges previsualitzables i descarregables en línia, amb suport per a PNG/JPG/WebP/GIF/SVG i més de 7 formats d'imatge habituals. Reconeix automàticament el prefix Data URL, previsualitza directament al navegador, ideal per depurar APIs i validar codificacions.
Relacionats
Què és Base64 a imatge?
Base64 a imatge és el procés invers de la codificació Base64: consisteix a restaurar una cadena codificada en Base64 a les dades binàries originals d'imatge (com ara PNG / JPG / WebP / GIF / SVG i altres formats), i previsualitzar-la directament al navegador o descarregar-la com a fitxer d'imatge local. És una eina essencial per processar imatges retornades per APIs, recursos en línia (Data URL), adjunts de correu electrònic en Base64 i altres escenaris.
**Principi fonamental:** Base64 codifica dades binàries en 64 caràcters ASCII imprimibles (A-Z, a-z, 0-9, +, /). Convertir a imatge significa restaurar aquesta cadena ASCII al flux de bytes binaris original, que el navegador interpreta com a píxels d'imatge segons el tipus MIME especificat (com image/png). Data URL (com ara `data:image/png;base64,iVBORw0KGgo...`) és una combinació de Base64 + prefix MIME, que l'eina reconeix i processa automàticament.
**Escenaris d'ús típics:** ①Depuració d'APIs: moltes APIs retornen codis de verificació, avatars d'usuari i signatures electròniques directament com a cadenes Base64, que el frontend necessita restaurar per visualitzar; ②Desenvolupament frontend: les icones petites incrustades com a Data URL (CSS background-image: url(data:image/png;base64,...)) es poden enganxar a l'eina per veure l'efecte real; ③Restauració d'adjunts de correu: els adjunts codificats en MIME Base64 es poden descodificar i guardar com a imatges originals; ④Dades de web scraping: les imatges Base64 obtingudes mitjançant scraping es poden descodificar i guardar com a fitxers locals; ⑤Preprocessament OCR: descodifica i utilitza eines OCR per reconèixer el contingut de la imatge.
**Formats d'imatge compatibles:** L'eina admet tots els tipus MIME d'imatge reconeguts de forma nativa pels navegadors: PNG (image/png), JPG/JPEG (image/jpeg), WebP (image/webp), GIF (image/gif), SVG (image/svg+xml), BMP (image/bmp), AVIF (image/avif), ICO (image/x-icon), etc. Cada format té diferents algoritmes de compressió i escenaris d'aplicació: PNG és sense pèrdua i adequat per a icones i captures de pantalla, JPG amb pèrdua per a fotografies, WebP recomanat per a navegadors moderns, SVG vectorial per a icones i logotips.
**Seguretat de la descodificació:** Totes les operacions de descodificació es realitzen al navegador mitjançant JavaScript (basat en `atob()` + `TextDecoder` o API `Blob`), les dades binàries de la imatge no s'envien a cap servidor. Pots utilitzar amb confiança cadenes Base64 que continguin informació sensible (com ara avatars d'usuari, captures de pantalla internes); totes les dades s'eliminen automàticament en tancar la pàgina.
Casos d'ús
- Restaurar dades d'imatge Base64 retornades per APIs a fitxers d'imatge previsualitzables i descarregables
- Verificar si els recursos d'imatge en línia del frontend (format Data URL) estan codificats correctament
- Confirmar si el contingut Base64 és complet quan es depuren interfícies de càrrega d'imatges
- Desar imatges Base64 com a fitxers PNG/JPG locals per a disseny o documentació
- Descodificar adjunts de correu electrònic codificats en Base64 per restaurar imatges
- Restaurar imatges Base64 obtingudes mitjançant web scraping i desar-les al disc
- Descodificar Data URL per verificar l'efecte de renderització real d'icones SVG
- Restaurar imatges Base64 retornades per interfícies OCR / AI com a fitxers locals per visualitzar
Com usar-ho
- Enganxa les dades d'imatge codificades en Base64 (amb o sense prefix Data URL, com ara data:image/png;base64,iVBORw0KG...)
- L'eina detecta automàticament el tipus MIME i descodifica (reconeixent-lo en Data URL, o detectant-lo per la capçalera del contingut)
- A la dreta es mostra en temps real la previsualització de la imatge i la informació de mida i dimensions del fitxer
- Fes clic a «Descarrega» per desar com a fitxer d'imatge local, o fes clic dret a la imatge «Anomena i desa la imatge»
- Si la descodificació falla, pots especificar manualment el tipus MIME o utilitzar l'eina Base64 Clean per preprocessar
Característiques
- Previsualització d'imatges en línia: després de descodificar, mostra la imatge directament al navegador sense necessitat de descarregar-la localment
- Suport multiformat: admet més de 7 tipus MIME d'imatge habituals com PNG / JPG / WebP / GIF / SVG / BMP / AVIF
- Reconeixement automàtic de Data URL: elimina automàticament el prefix data:image/png;base64, i extreu el contingut Base64 pur per descodificar
- Entrada Base64 pura: admet cadenes Base64 sense prefix, amb possibilitat d'especificar el tipus MIME
- Descàrrega de fitxers d'imatge: permet desar la imatge descodificada com a fitxer PNG/JPG local amb un sol clic
- Comptador de caràcters en temps real: mostra en temps real el nombre de caràcters d'entrada i bytes després de descodificar, per avaluar la mida de la imatge
- Detecció d'errors: indica la posició exacta de l'error quan la descodificació falla (caràcters Base64 no vàlids, longitud incorrecta, MIME no coincident)
- Zero càrrega al servidor: tota la descodificació i previsualització es fa al navegador, sense passar per cap servidor
- Compatibilitat bidireccional completa: s'utilitza de forma aparellada amb l'eina «Imatge a Base64», formant un flux de treball de conversió bidireccional complet
Exemples de codi
JavaScript: Descodificació nativa del navegador + previsualització amb Blob URL
javascriptUtilitza les APIs natives del navegador atob() + TextDecoder + Blob per descodificar Base64 i mostrar la imatge al navegador.
// Base64 → Imatge (implementació nativa del navegador)
function base64ToImage(base64String, mimeType = 'image/png') {
// 1. Elimina el prefix Data URL (si n'hi ha)
const clean = base64String.replace(/^data:image\/\w+;base64,/, '');
// 2. Descodifica amb atob() natiu del navegador a cadena binària
const binary = atob(clean);
// 3. Converteix a Uint8Array
const bytes = new Uint8Array(binary.length);
for (let i = 0; i < binary.length; i++) {
bytes[i] = binary.charCodeAt(i);
}
// 4. Crea un Blob URL per a la previsualització amb l'etiqueta <img>
const blob = new Blob([bytes], { type: mimeType });
const url = URL.createObjectURL(blob);
// 5. Estableix img.src per previsualitzar
const img = document.createElement('img');
img.src = url;
img.onload = () => {
console.log(`Dimensions de la imatge: ${img.width}x${img.height}`);
console.log(`Mida del fitxer: ${bytes.byteLength} bytes`);
};
return { img, url, size: bytes.byteLength };
}
// Exemple d'ús:
const result = base64ToImage('iVBORw0KGgoAAAANSUhEUgAAAAUA...');
document.body.appendChild(result.img);
// Allibera el Blob URL (evita fuites de memòria)
setTimeout(() => URL.revokeObjectURL(result.url), 60000);Python: Descodifica amb la llibreria base64 i desa la imatge
pythonLa llibreria estàndard de Python base64 descodifica les dades Base64 a flux binari d'imatge, i després es desa amb PIL/Pillow o operacions de fitxer integrades.
import base64
from pathlib import Path
def base64_to_image(base64_string: str, output_path: str, mime_type: str = 'image/png'):
"""Descodifica una cadena Base64 i la desa com a fitxer d'imatge"""
# 1. Elimina el prefix Data URL
if base64_string.startswith('data:image'):
# Format: data:image/png;base64,iVBORw0...
header, base64_string = base64_string.split(',', 1)
# Extreu MIME automàticament de l'header
if 'image/' in header:
mime_type = header.split('data:')[1].split(';')[0]
# 2. Descodifica
image_bytes = base64.b64decode(base64_string)
# 3. Desa al fitxer
output_file = Path(output_path)
output_file.parent.mkdir(parents=True, exist_ok=True)
output_file.write_bytes(image_bytes)
print(f"✅ Desat: {output_file}")
print(f" Mida del fitxer: {len(image_bytes):,} bytes")
print(f" Tipus MIME: {mime_type}")
return output_file
# Exemple d'ús:
# 1. Cadena Base64 obtinguda de la resposta d'API
api_base64_response = "iVBORw0KGgoAAAANSUhEUgAA..."
# 2. Descodifica i desa
base64_to_image(api_base64_response, 'output/captcha.png')
# 3. Opcional: processament addicional amb PIL
try:
from PIL import Image
img = Image.open('output/captcha.png')
print(f"Dimensions de la imatge: {img.size}")
img.save('output/captcha.png', optimize=True)
except ImportError:
print('Instal·la Pillow per processar imatges: pip install Pillow')Java: java.util.Base64 + ImageIO per descodificar imatges
javaLa llibreria estàndard de Java Base64 descodifica el flux binari d'imatge, i amb ImageIO / BufferedImage processa les metadades de la imatge.
import java.io.*;
import java.util.Base64;
import javax.imageio.ImageIO;
import java.awt.image.BufferedImage;
public class Base64ToImage {
public static void main(String[] args) throws Exception {
String base64String = "iVBORw0KGgoAAAANSUhEUgAA...";
String mimeType = "image/png";
// 1. Elimina el prefix Data URL (si n'hi ha)
if (base64String.startsWith("data:image")) {
int commaIdx = base64String.indexOf(',');
String header = base64String.substring(0, commaIdx);
base64String = base64String.substring(commaIdx + 1);
// Extreu MIME de l'header
if (header.contains("image/")) {
mimeType = header.substring(header.indexOf("data:") + 5, header.indexOf(";"));
}
}
// 2. Descodificació Base64
byte[] imageBytes = Base64.getDecoder().decode(base64String);
// 3. Desa al fitxer
String extension = mimeType.substring("image/".length());
File outputFile = new File("output." + extension);
try (FileOutputStream fos = new FileOutputStream(outputFile)) {
fos.write(imageBytes);
}
System.out.println("✅ Desat: " + outputFile.getAbsolutePath());
System.out.println(" Mida del fitxer: " + imageBytes.length + " bytes");
// 4. (Opcional) Llegeix metadades de la imatge
ByteArrayInputStream bais = new ByteArrayInputStream(imageBytes);
BufferedImage image = ImageIO.read(bais);
if (image != null) {
System.out.println("Dimensions de la imatge: " + image.getWidth() + "x" + image.getHeight());
}
}
}Preguntes freqients
Quins formats d'imatge admet?
Admet tots els tipus MIME d'imatge reconeguts de forma nativa pels navegadors: PNG, JPG, WebP, GIF, SVG, BMP, AVIF, ICO, etc. L'eina determina automàticament el format segons el prefix MIME del Data URL o les característiques d'entrada, i també pots especificar manualment el tipus MIME a la interfície. Triar el format correcte garanteix que el navegador descodifiqui i mostri la imatge correctament.
Cal que l'entrada tingui el prefix data:image/png;base64?
No cal. L'eina admet dos formats d'entrada: ①Cadena Base64 pura (com ara iVBORw0KGgoAA...), cal seleccionar el tipus MIME a la interfície (com ara PNG / JPG); ②Format Data URL (com ara data:image/png;base64,iVBORw0KGgo...), l'eina reconeix automàticament el tipus MIME del prefix i descodifica. Tots dos mètodes d'entrada són compatibles.
Es pot previsualitzar directament al navegador?
Sí. La imatge descodificada es mostra directament al navegador mitjançant Blob URL, amb suport per a previsualització en línia. Després de confirmar que el contingut és correcte, descarrega'l com a fitxer local o copia el Data URL per incrustar-lo en HTML/CSS. Tot el procés de previsualització no requereix sol·licituds de xarxa.
Quina diferència hi ha amb l'eina Base64 a fitxer?
Base64 a imatge està optimitzat específicament per a formats d'imatge: ①Reconeix automàticament el tipus MIME; ②Previsualitza directament al navegador mitjançant Blob URL; ③Estableix automàticament l'extensió del fitxer (.png / .jpg, etc.) segons el MIME; ④Mostra informació de dimensions de la imatge. Base64 a fitxer és una eina genèrica, adequada per restaurar i descarregar qualsevol fitxer binari (com ara PDF, ZIP, àudio, etc.).
Què faig si la imatge es mostra incompleta després de descodificar?
Possibles causes: ①La cadena Base64 està truncada (comprova que la longitud sigui completa); ②El tipus MIME especificat és incorrecte (per exemple, descodificar dades PNG com a JPG); ③Les dades originals ja estan danyades. Recomanacions: ①Confirma que el Base64 font sigui complet; ②Prova a canviar diferents tipus MIME; ③Utilitza l'eina Base64 Validate per comprovar la validesa.
Quant augmenta el volum de Base64 respecte a la imatge original?
La codificació Base64 augmenta el volum de les dades binàries originals aproximadament un 33% (3 bytes → 4 caràcters). Per exemple, un PNG de 100KB es converteix en una cadena Base64 d'uns 133KB després de codificar. Per tant, Base64 és adequat per a imatges petites (< 10KB), per a imatges grans es recomana utilitzar URL HTTP per a la transmissió directa.
Admet imatges vectorials SVG?
Sí. SVG és un format d'imatge vectorial basat en XML, que després de codificar en Base64 es pot incrustar directament en HTML <img> o CSS background-image. Després de descodificar, es renderitza de forma vectorial al navegador i es pot escalar sense pèrdua. Tingues en compte que SVG pot contenir codi JavaScript, cal parar atenció a la seguretat XSS quan s'utilitza.
Com desar en un format específic?
Després de descodificar, fes clic al botó de descàrrega; l'eina afegirà automàticament l'extensió corresponent segons el tipus MIME utilitzat en descodificar (image/png → .png, image/jpeg → .jpg). Si cal convertir el format (com ara PNG → JPG), es recomana descodificar primer i després utilitzar altres eines (com ara Canvas / ImageMagick) per convertir.
La imatge és buida o danyada després de descodificar?
Causes habituals: ①Base64 conté salts de línia o espais que no s'han netejat: utilitza primer l'eina Base64 Clean per preprocessar; ②Falta el padding (=): aquesta eina el completa automàticament; ③El tipus MIME no coincideix amb les dades originals: comprova el Content-Type retornat per l'API font o prova manualment altres MIME; ④El Base64 font s'ha truncat durant la transmissió: torna a obtenir la cadena completa.
Admet imatges grans (>10MB)?
Sí, però el rendiment de renderització del navegador disminueix per a imatges molt grans. La descodificació de 10MB Base64 (uns 7,5MB d'imatge original) sol ser fluida; per sobre de 50MB poden aparèixer advertències de memòria. Recomanacions: ①Utilitza primer base64-clean per eliminar espais en blanc; ②Descodifica imatges grans per blocs; ③Confirma que la memòria del navegador sigui suficient (es recomana 4GB+).
Solució de problemes
La imatge es mostra buida després de descodificar
Pot ser que el tipus MIME no coincideixi o el Base64 sigui incomplet. Comprova: 1) La capçalera Content-Type retornada per l'API font; 2) Canvia manualment el tipus MIME i torna-ho a provar; 3) Confirma que la cadena Base64 sigui completa (longitud segons l'esperat).
Error de descodificació InvalidCharacterError
La cadena Base64 conté caràcters no permesos (espais, salts de línia, xinès, etc.). Utilitza primer l'eina Base64 Clean per eliminar tots els espais en blanc i caràcters no permesos, i després converteix.
L'extensió de la imatge descarregada és incorrecta
Comprova si el tipus MIME en descodificar coincideix amb la imatge original. Si l'API font retorna image/jpeg però les dades Base64 són realment PNG, l'extensió serà .jpg però el format real serà PNG. Es recomana confirmar el format original des del prefix MIME o la capçalera Content-Type.
El navegador es bloqueja en descodificar imatges grans
Les cadenes Base64 de més de 50MB poden causar desbordament de memòria. Recomanacions: ①Utilitza primer l'eina base64-clean per eliminar caràcters d'espai en blanc; ②Descodifica imatges grans per lots (per exemple, dividint per tessel·les); ③Confirma que la memòria del navegador sigui suficient (es recomana 4GB+ de memòria disponible); ④Utilitza scripts Node.js / Python del costat del servidor per processar imatges molt grans.
La imatge SVG no es pot mostrar després de descodificar
SVG és un format vectorial basat en XML, després de descodificar cal assegurar-se que: 1) El tipus MIME utilitza image/svg+xml; 2) SVG no pot contenir caràcters especials sense escapar; 3) Alguns navegadors tenen restriccions de seguretat per al codi JavaScript a SVG. Es recomana utilitzar primer eines d'anàlisi XML per verificar la validesa de SVG.
Glossari
- Base64
- Mètode de codificació que representa dades binàries amb 64 caràcters ASCII, definit a RFC 4648. Aquesta eina fa el procés invers: restaura cadenes Base64 al binari original d'imatge.
- Data URL
- Format d'URL en línia definit a RFC 2397: data:image/<MIME>;base64,<dades>. Es pot utilitzar directament a HTML img src, CSS background-image. Aquesta eina reconeix i elimina el prefix automàticament.
- Tipus MIME
- Tipus de mitjà d'Internet, com ara image/png, image/jpeg. El navegador decideix com interpretar el flux de bytes com a imatge segons el MIME.
- PNG
- Format de mapa de bits amb compressió sense pèrdua, que admet canal alfa. S'utilitza habitualment per a icones, captures de pantalla i imatges que requereixen preservar detalls. Després de Base64, el volum és aproximadament 1,33 vegades l'original.
- JPG/JPEG
- Format de mapa de bits amb compressió amb pèrdua, adequat per a fotografies. Alta taxa de compressió però no admet transparència. Després de Base64, el volum és aproximadament 1,33 vegades l'original.
- WebP
- Format d'imatge modern desenvolupat per Google, que admet compressió amb/sense pèrdua i canal alfa simultàniament. És un 25-35% més petit que PNG/JPG.
- Blob (Binary Large Object)
- Objecte binari natiu del navegador, que pot embolicar el flux de bytes descodificat de Base64 en un Blob URL d'imatge per a previsualització i descàrrega.
Taula comparativa de 8 formats d'imatge
Diferents formats d'imatge tenen diferents algoritmes de compressió, característiques i escenaris d'aplicació.
| Format | Tipus MIME | Tipus de compressió | Suport transparència | Escenari típic |
|---|---|---|---|---|
PNG | image/png | Sense pèrdua | ✅ | Icones / Captures / Logotips |
JPG | image/jpeg | Amb pèrdua | ❌ | Fotografies / Paisatges |
WebP | image/webp | Amb/Sense pèrdua | ✅ | Recomanat per a web modern |
GIF | image/gif | Sense pèrdua (256 colors) | ✅ (1-bit) | Animacions petites / Icones senzilles |
SVG | image/svg+xml | Vectorial | ✅ | Logotips / Icones / Il·lustracions |
BMP | image/bmp | Sense | Opcional | Imatges del sistema Windows |
AVIF | image/avif | Amb/Sense pèrdua | ✅ | Format de pròxima generació |
ICO | image/x-icon | Sense pèrdua | ✅ | Favicon de lloc web |
Comparació de càrrega d'imatges Data URL vs HTTP URL
Les imatges descodificades es poden incrustar directament en HTML/CSS com a Data URL, en comparació amb els HTTP URL tradicionals.
| Dimensió | Data URL | HTTP URL |
|---|---|---|
| Nombre de sol·licituds HTTP | 0 | 1 cop |
| Reutilització de memòria cau | Difícil | Fàcil (CDN / navegador) |
| Volum | Original + 33% | Mida original |
| Mida adequada | < 10 KB | Qualsevol mida |
| Transmissió comprimida | No (ja codificat) | gzip / Brotli |
| Restriccions CSP | Possible | Generalment permès |
| Emmagatzematge al servidor | No cal | Cal |
| Accés fora de línia | ✅ (a nivell de fitxer) | ❌ (cal memòria cau) |
Taula de 5 errors habituals en Base64 a imatge
Quan trobis errors de descodificació, localitza el problema ràpidament segons la taula següent.
| Símptoma d'error | Causa possible | Solució |
|---|---|---|
| Error de descodificació: InvalidCharacterError | Conté espais, salts de línia o caràcters no Base64 | Utilitza l'eina Base64 Clean per preprocessar |
| La imatge es mostra buida | El tipus MIME no coincideix amb les dades originals | Canvia al MIME correcte (per exemple, dades PNG utilitzen image/png) |
| La imatge es mostra incompleta | La cadena Base64 està truncada | Torna a obtenir la cadena Base64 completa |
| Error de padding | Base64 URL-safe omet el padding | Utilitza l'eina Base64 Padding per completar amb = |
| Desbordament de memòria del navegador | La imatge és massa gran (> 50MB) | Descodifica per blocs o utilitza eines de compressió d'imatges |
Authoritative References
- Comparació Segura de Text
- Conversió Binària
- Xifrat de César
- Codi Morse
- Codificació Hexadecimal
- Base64 a Vídeo
- Imatge a Base64
- Base64 a imatge
- Text a Base64
- Base64 a Text
- Verificador de hash de fitxer
- Fitxer a Base64
- Base64 a Fitxer
- Àudio a Base64
- Base64 a Àudio
- Xifrar i desxifrar AES
- Xifratge i Desxifrat DES
- Codificador i Descodificador Base32
- Base58 Codificació i descodificació
- Codificació Base64
- Descodificació Base64
- Comparació Base64
- Divisor Base64
- Base64 fusió de múltiples línies
- Formateig Base64
- Validació Base64
- Codificació Base64 per lots
- Descodificació per Lots Base64
- Neteja Base64
- Gestió del padding Base64
- Estadístiques Base64
- Base64 a Hex
- Convertidor Base64 DataURL
- Convertidor Base64-Hex
- Codificació Base85
- Generació i Verificació HMAC
- Derivació PBKDF2
- Hash MD5
- Hash SHA-256
- Hash SHA1
- Hash SHA512
- Decodificador, Verificador i Generador JWT
- Codificació d'Entitats HTML
- Unicode Escape
- Codificació URL
- Base64 URL-Safe
- MIME Base64
- Ofuscació de Java
- Ofuscació JS
- Ofuscació de PHP
- Ofuscació de Python
- Convertidor de Vídeo a Base64