Dekodér a prehliadač obrázkov Base64 | Konvertovať Base64 na obrázky
Okamžite dekódujte a prehliadajte reťazce obrázkov kódovaných v base64. Podporuje JPEG, PNG, GIF a ďalšie bežné formáty s chybovým spracovaním pre neplatné vstupy.
Dekodér a prehliadač obrázkov Base64
Vložte reťazec obrázka zakódovaný v base64 a dekódujte ho na zobrazenie obrázka.
Náhľad obrázka
Nie je možné zobraziť obrázok. Vložte reťazec base64, aby ste ho videli automaticky dekódovaný.
Podporuje JPEG, PNG, GIF a ďalšie bežné formáty obrázkov.
Pokyny
1. Vložte reťazec obrázka zakódovaný v base64 do textovej oblasti vyššie.
2. Obrázok sa automaticky dekóduje, keď píšete, alebo kliknite na tlačidlo 'Dekódovať obrázok'.
3. Dekódovaný obrázok sa zobrazí v náhľadovej oblasti nižšie.
Poznámka: Reťazec by mal začínať 'data:image/' pre najlepšie výsledky, ale nástroj sa pokúsi dekódovať reťazce aj bez tohto predpony.
Dokumentácia
Dekodér a prehliadač obrázkov Base64
Úvod
Base64 je schéma kódovania binárnych údajov do textu, ktorá predstavuje binárne údaje vo formáte ASCII reťazca. Bežne sa používa na vloženie údajov obrázkov priamo do HTML, CSS, JavaScriptu, JSON a iných textových formátov, kde nie je možné priamo zahrnúť binárne údaje. Tento nástroj vám umožňuje dekódovať reťazce obrázkov kódované v base64 a okamžite si pozrieť výsledné obrázky priamo vo vašom prehliadači.
Kódovanie base64 zvyšuje veľkosť údajov približne o 33 % v porovnaní s pôvodným binárnym formátom, ale umožňuje zahrnúť obrázky priamo do textových dokumentov bez potreby samostatných sťahovaní súborov. To môže byť obzvlášť užitočné pre malé obrázky, ako sú ikony, logá alebo jednoduché grafiky, kde pohodlie vloženia preváži zvýšenie veľkosti.
Náš nástroj Dekodér obrázkov Base64 poskytuje jednoduché rozhranie, kde môžete vložiť reťazec obrázka kódovaný v base64 a okamžite vidieť dekódovaný obrázok. Podporuje všetky bežné formáty obrázkov vrátane JPEG, PNG, GIF, WebP a SVG a dokáže spracovať ako formát URL údajov (s prefixom data:image/...), tak aj surové reťazce base64.
Technické podrobnosti
Formát kódovania Base64
Kódovanie base64 konvertuje binárne údaje do súboru 64 ASCII znakov (A-Z, a-z, 0-9, + a /), pričom = sa používa na vyplnenie. Pre obrázky na webe sú údaje base64 zvyčajne formátované ako URL údajov s nasledujúcou štruktúrou:
1data:[<media type>][;base64],<data>
2Napríklad, obrázok vo formáte PNG kódovaný v base64 môže vyzerať takto:
1data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==
2Zložky tohto formátu sú:
data:- URL schémaimage/png- MIME typ údajov;base64- metóda kódovania,- oddeľovač medzi hlavičkou a údajmi- Skutočné údaje kódované v base64
Proces dekódovania
Pri dekódovaní reťazca obrázka base64 sa vykonávajú nasledujúce kroky:
- Reťazec sa analyzuje, aby sa zistilo, či obsahuje prefix URL údajov
- Ak prefix existuje, MIME typ sa extrahuje na určenie formátu obrázka
- Časť údajov base64 sa izoluje a dekóduje na binárne údaje
- Binárne údaje sa prevedú na Blob alebo objektovú URL, ktorá sa môže zobraziť ako obrázok
Ak vstup neobsahuje prefix URL údajov, dekodér sa pokúsi spracovať ho ako surové údaje base64 a odvodí typ obrázka z dekódovanej binárnej hlavičky alebo predvolí na PNG.
Podporované formáty obrázkov
Tento nástroj podporuje všetky bežné formáty obrázkov na webe:
| Formát | MIME typ | Typické prípady použitia |
|---|---|---|
| JPEG | image/jpeg | Fotografie, komplexné obrázky s mnohými farbami |
| PNG | image/png | Obrázky vyžadujúce priesvitnosť, snímky obrazovky, grafiky |
| GIF | image/gif | Jednoduché animácie, obrázky s obmedzenou paletou farieb |
| WebP | image/webp | Moderný formát s lepšou kompresiou ako JPEG/PNG |
| SVG | image/svg+xml | Vektorové grafiky, škálovateľné ikony a ilustrácie |
Prípady použitia
Obrázky kódované v base64 majú niekoľko praktických aplikácií vo webovom vývoji a mimo neho:
-
Vkladanie obrázkov do HTML/CSS/JS: Znižuje HTTP požiadavky tým, že zahrňuje obrázky priamo do vášho kódu, čo môže zlepšiť čas načítania stránok pre malé obrázky.
-
Šablóny e-mailov: Zaisťuje, že obrázky sa správne zobrazujú v e-mailových klientoch, ktoré predvolene blokujú externé obrázky.
-
Jednofájlové aplikácie: Vytvára samostatné HTML aplikácie, kde sú všetky zdroje vložené do jedného súboru.
-
Odpovede API: Zahrňuje údaje obrázkov priamo do JSON odpovedí bez potreby samostatných koncových bodov obrázkov.
-
Data URIs v CSS: Vkladá malé ikony a pozadia priamo do CSS súborov.
-
Manipulácie s plátnom: Uľahčuje ukladanie a prenášanie údajov obrázkov z plátna.
-
Offline aplikácie: Ukladá obrázky ako textové reťazce do localStorage alebo IndexedDB.
Úvahy o výkonnosti
Aj keď kódovanie base64 ponúka pohodlie, prichádza s obchodnými podmienkami:
- Zvýšená veľkosť súboru: Kódovanie base64 zvyšuje veľkosť údajov približne o 33 %.
- Žiadne vyrovnávanie v prehliadači: Vložené obrázky nemôžu byť vyrovnávané samostatne ako externé súbory obrázkov.
- Náklady na analýzu: Prehliadače musia dekódovať reťazec base64 pred zobrazením.
- Výzvy údržby: Vložené obrázky sú ťažšie aktualizovať ako odkázané súbory.
Pre optimálny výkon sa kódovanie base64 vo všeobecnosti odporúča len pre malé obrázky (pod 10KB). Väčšie obrázky sú zvyčajne lepšie podávané ako samostatné súbory, ktoré môžu byť správne vyrovnávané a optimalizované.
Alternatívy
Existuje niekoľko alternatív kódovaniu base64 pre rôzne prípady použitia:
-
Vkladanie SVG: Pre vektorové grafiky, inline SVG často poskytuje lepší výkon a flexibilitu ako kódované base64 SVG.
-
WebP a moderné formáty obrázkov: Tieto poskytujú lepšiu kompresiu ako kódované base64 JPEG/PNG.
-
Obrázkové sprity: Kombinovanie viacerých malých obrázkov do jedného súboru a použitie CSS pozicionovania.
-
CDN (Content Delivery Networks): Pre produkčné stránky je často efektívnejšie podávať optimalizované obrázky z CDN.
-
Kompresia údajov: Pre prenos veľkého množstva binárnych údajov sú špecializované kompresné algoritmy ako gzip alebo Brotli efektívnejšie ako base64.
Kódové príklady
Tu sú príklady práce s obrázkami kódovanými v base64 v rôznych programovacích jazykoch:
1// Konvertovať obrázok na base64 v JavaScripte (prehliadač)
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 // Získať ako URL údajov (base64 reťazec)
11 return canvas.toDataURL('image/png');
12}
13
14// Zobraziť base64 obrázok
15function displayBase64Image(base64String) {
16 const img = new Image();
17
18 // Spracovať reťazce bez prefixu URL údajov
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# Konvertovať súbor obrázka na 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# Konvertovať base64 na obrázok a uložiť
12def base64_to_image(base64_string, output_path):
13 # Odstrániť prefix URL údajov, ak je prítomný
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# Príklad použitia
22base64_str = image_to_base64("input.jpg")
23print(f"data:image/jpeg;base64,{base64_str[:30]}...") # Vytlačiť začiatok reťazca
24
25base64_to_image(base64_str, "output.jpg")
261<?php
2// Konvertovať súbor obrázka na base64 v 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// Konvertovať base64 na obrázok a uložiť
10function base64ToImage($base64String, $outputPath) {
11 // Extrahovať binárne údaje kódované v base64
12 $imageData = explode(',', $base64String);
13 $imageData = isset($imageData[1]) ? $imageData[1] : $imageData[0];
14
15 // Dekódovať a uložiť
16 $data = base64_decode($imageData);
17 file_put_contents($outputPath, $data);
18}
19
20// Príklad použitia
21$base64Image = imageToBase64('input.jpg');
22echo substr($base64Image, 0, 50) . "...\n"; // Vytlačiť začiatok reťazca
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 // Konvertovať súbor obrázka na 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 // Konvertovať base64 na obrázok a uložiť
20 public static void base64ToImage(String base64String, String outputPath) throws IOException {
21 // Odstrániť prefix URL údajov, ak je prítomný
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) + "..."); // Vytlačiť začiatok reťazca
36
37 base64ToImage(base64Image, "output.jpg");
38 }
39}
401using System;
2using System.IO;
3using System.Text.RegularExpressions;
4
5class Base64ImageConverter
6{
7 // Konvertovať súbor obrázka na 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 // Konvertovať base64 na obrázok a uložiť
18 public static void Base64ToImage(string base64String, string outputPath)
19 {
20 // Odstrániť prefix URL údajov, ak je prítomný
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) + "..."); // Vytlačiť začiatok reťazca
34
35 Base64ToImage(base64Image, "output.jpg");
36 }
37}
381require 'base64'
2
3# Konvertovať súbor obrázka na 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# Konvertovať base64 na obrázok a uložiť
11def base64_to_image(base64_string, output_path)
12 # Odstrániť prefix URL údajov, ak je prítomný
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# Príklad použitia
23base64_image = image_to_base64('input.jpg')
24puts base64_image[0, 50] + '...' # Vytlačiť začiatok reťazca
25
26base64_to_image(base64_image, 'output.jpg')
271' Excel VBA funkcia na kódovanie súboru do 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' Použitie v Exceli:
27' =FileToBase64("C:\cesta\k\obrázku.jpg")
28Implementácia HTML
Tu je spôsob, ako vložiť obrázok base64 priamo do HTML:
1<!-- Vkladanie obrázka base64 priamo do HTML -->
2<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Obrázok kódovaný v base64">
3
4<!-- Použitie CSS s obrázkom na pozadí 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
Kódovanie base64 má svoje korene vo vývoji elektronických poštových systémov v 70. rokoch. Bolo navrhnuté na riešenie problému prenosu binárnych údajov prostredníctvom systémov, ktoré boli navrhnuté na spracovanie iba textu ASCII.
Schéma kódovania bola formalizovaná v roku 1987 publikovaním RFC 989, ktoré definovalo štandard Privacy Enhanced Mail (PEM). Tento bol neskôr aktualizovaný v RFC 1421 a iných súvisiacich štandardoch. Termín "base64" sám o sebe pochádza z toho, že kódovanie používa 64 rôznych ASCII znakov na reprezentáciu binárnych údajov.
V kontexte webového vývoja sa kódovanie obrázkov v base64 stalo populárnym s príchodom URL údajov, ktoré boli prvýkrát navrhnuté v RFC 2397 v roku 1998. To umožnilo zahrnúť binárne údaje priamo do HTML, CSS a iných webových dokumentov.
Použitie obrázkov kódovaných v base64 vo webovom vývoji sa stalo rozšíreným v polovici 2000-tych rokov, keď sa vývojári snažili nájsť spôsoby, ako znížiť HTTP požiadavky a zlepšiť čas načítania stránok. Technika bola obzvlášť prijatá počas vzostupu mobilného webového vývoja, kde bolo minimalizovanie požiadaviek kľúčové pre výkon na pomalších mobilných pripojeniach.
Dnes kódovanie base64 zostáva dôležitým nástrojom vo webovom vývoji, hoci jeho použitie sa stalo viac cieleným, keď sa vyvinuli osvedčené postupy. Moderné prístupy majú tendenciu používať kódovanie base64 selektívne pre malé, kritické obrázky, zatiaľ čo pre väčšie aktíva využívajú efektívnejšie metódy dodania, ako je HTTP/2.
Odkazy
Spätná väzba
Kliknite na toast so spätnou väzbou, aby ste začali dávať spätnú väzbu o tomto nástroji
Súvisiace nástroje
Objavte ďalšie nástroje, ktoré by mohli byť užitočné pre váš pracovný tok