Dekodér a prohlížeč obrázků Base64 | Převod Base64 na obrázky
Okamžitě dekódujte a zobrazte řetězce obrázků kódované v base64. Podporuje formáty JPEG, PNG, GIF a další běžné formáty s chybovým zpracováním pro neplatné vstupy.
Dekodér a prohlížeč obrázků Base64
Vložte řetězec obrázku zakódovaný v base64 a dekódujte ho pro zobrazení obrázku.
Náhled obrázku
Žádný obrázek k zobrazení. Vložte řetězec base64, abyste ho viděli automaticky dekódovaný.
Podporuje JPEG, PNG, GIF a další běžné formáty obrázků.
Pokyny
1. Vložte řetězec obrázku zakódovaný v base64 do textového pole výše.
2. Obrázek bude automaticky dekódován, jakmile píšete, nebo klikněte na tlačítko 'Dekódovat obrázek'.
3. Dekódovaný obrázek se objeví v oblasti náhledu níže.
Poznámka: Řetězec by měl začínat 'data:image/' pro nejlepší výsledky, ale nástroj se pokusí dekódovat řetězce i bez tohoto prefixu.
Dokumentace
Dekodér a prohlížeč obrázků Base64
Úvod
Base64 je schéma kódování binárního textu, které představuje binární data ve formátu ASCII řetězce. Často se používá k vložení dat obrázků přímo do HTML, CSS, JavaScriptu, JSON a dalších textových formátů, kde nelze přímo zahrnout binární data. Tento nástroj vám umožňuje dekódovat řetězce obrázků kódované v base64 a přímo zobrazit výsledné obrázky ve vašem prohlížeči.
Kódování Base64 zvyšuje velikost dat přibližně o 33 % ve srovnání s původními binárními daty, ale umožňuje zahrnout obrázky přímo do textových dokumentů bez nutnosti stahování samostatných souborů. To může být zvláště užitečné pro malé obrázky, jako jsou ikony, loga nebo jednoduché grafiky, kde pohodlí vložení převyšuje zvýšení velikosti.
Náš nástroj pro dekódování obrázků Base64 poskytuje jednoduché rozhraní, kde můžete vložit řetězec obrázku kódovaný v base64 a okamžitě vidět dekódovaný obrázek. Podporuje všechny běžné formáty obrázků, včetně JPEG, PNG, GIF, WebP a SVG, a může zpracovávat jak formát datové URL (s předponou data:image/...), tak surové base64 řetězce.
Technické detaily
Formát kódování Base64
Kódování Base64 převádí binární data na sadu 64 ASCII znaků (A-Z, a-z, 0-9, + a /), přičemž = se používá pro vycpání. Pro obrázky na webu jsou data base64 obvykle formátována jako datová URL s následující strukturou:
1data:[<media type>][;base64],<data>
2Například base64-kódovaný obrázek PNG může vypadat takto:
1data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==
2Složky tohoto formátu jsou:
data:- URL schémaimage/png- MIME typ dat;base64- metoda kódování,- oddělovač mezi hlavičkou a daty- Skutečná data kódovaná v base64
Proces dekódování
Při dekódování řetězce obrázku base64 probíhají následující kroky:
- Řetězec je analyzován, aby se zjistilo, zda obsahuje předponu datové URL
- Pokud existuje předpona, MIME typ je extrahován pro určení formátu obrázku
- Část dat base64 je izolována a dekódována na binární data
- Binární data jsou převedena na Blob nebo objektovou URL, která může být zobrazena jako obrázek
Pokud vstup neobsahuje předponu datové URL, dekodér se pokusí jej považovat za surová data base64 a odvodit typ obrázku z dekódované binární hlavičky nebo defaultně použít PNG.
Podporované formáty obrázků
Tento nástroj podporuje všechny běžné formáty obrázků na webu:
| Formát | MIME typ | Typické případy použití |
|---|---|---|
| JPEG | image/jpeg | Fotografie, složité obrázky s mnoha barvami |
| PNG | image/png | Obrázky vyžadující průhlednost, snímky obrazovky, grafika |
| GIF | image/gif | Jednoduché animace, obrázky s omezenou paletou barev |
| WebP | image/webp | Moderní formát s lepší kompresí než JPEG/PNG |
| SVG | image/svg+xml | Vektorová grafika, škálovatelné ikony a ilustrace |
Případy použití
Obrázky kódované v base64 mají několik praktických aplikací ve webovém vývoji a jinde:
-
Vkládání obrázků do HTML/CSS/JS: Snižuje HTTP požadavky tím, že zahrnuje obrázky přímo do vašeho kódu, což může zlepšit dobu načítání stránky pro malé obrázky.
-
Šablony e-mailů: Zajišťuje, že obrázky se správně zobrazují v e-mailových klientech, které ve výchozím nastavení blokují externí obrázky.
-
Jednofilové aplikace: Vytváří samostatné HTML aplikace, kde jsou všechny zdroje vloženy do jednoho souboru.
-
Odpovědi API: Zahrnuje data obrázků přímo v JSON odpovědích bez nutnosti samostatných koncových bodů pro obrázky.
-
Data URIs v CSS: Vkládá malé ikony a pozadí přímo do CSS souborů.
-
Manipulace s plátnem: Usnadňuje ukládání a přenos dat obrázků plátna.
-
Offline aplikace: Ukládá obrázky jako textové řetězce do localStorage nebo IndexedDB.
Úvahy o výkonu
I když kódování base64 nabízí pohodlí, přichází s kompromisy:
- Zvýšená velikost souboru: Kódování base64 zvyšuje velikost dat přibližně o 33 %.
- Žádné mezipaměť prohlížeče: Vložené obrázky nemohou být mezipamětovány samostatně jako externí soubory obrázků.
- Náklady na analýzu: Prohlížeče musí dekódovat řetězec base64 před vykreslením.
- Výzvy údržby: Vložené obrázky jsou obtížněji aktualizovatelné než odkazované soubory.
Pro optimální výkon se obvykle doporučuje kódování base64 pouze pro malé obrázky (pod 10 KB). Větší obrázky jsou obvykle lépe poskytovány jako samostatné soubory, které mohou být správně mezipamětovány a optimalizovány.
Alternativy
Existuje několik alternativ k kódování base64 pro různé případy použití:
-
Inline vkládání SVG: Pro vektorovou grafiku často poskytuje inline SVG lepší výkon a flexibilitu než base64-kódované SVG.
-
WebP a moderní formáty obrázků: Tyto poskytují lepší kompresi než base64-kódované JPEG/PNG.
-
Obrázkové sprity: Kombinování několika malých obrázků do jednoho souboru a použití CSS pozicování.
-
CDN (Content Delivery Networks): Pro produkční stránky je často efektivnější poskytovat optimalizované obrázky z CDN.
-
Kompresní data: Pro přenos velkého množství binárních dat jsou specializované kompresní algoritmy jako gzip nebo Brotli efektivnější než base64.
Příklady kódu
Zde jsou příklady práce s obrázky kódovanými v base64 v různých programovacích jazycích:
1// Převod obrázku na base64 v JavaScriptu (prohlížeč)
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ískat jako datovou URL (base64 řetězec)
11 return canvas.toDataURL('image/png');
12}
13
14// Zobrazit base64 obrázek
15function displayBase64Image(base64String) {
16 const img = new Image();
17
18 // Zpracovat řetězce bez předpony datové URL
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# Převod obrázku 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# Převod base64 na obrázek a uložení
12def base64_to_image(base64_string, output_path):
13 # Odstranit předponu datové URL, pokud je přítomna
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# Příklad použití
22base64_str = image_to_base64("input.jpg")
23print(f"data:image/jpeg;base64,{base64_str[:30]}...") # Tisknout začátek řetězce
24
25base64_to_image(base64_str, "output.jpg")
261<?php
2// Převod obrázku 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// Převod base64 na obrázek a uložení
10function base64ToImage($base64String, $outputPath) {
11 // Extrakce binárních dat kódovaných v base64
12 $imageData = explode(',', $base64String);
13 $imageData = isset($imageData[1]) ? $imageData[1] : $imageData[0];
14
15 // Dekódování a uložení
16 $data = base64_decode($imageData);
17 file_put_contents($outputPath, $data);
18}
19
20// Příklad použití
21$base64Image = imageToBase64('input.jpg');
22echo substr($base64Image, 0, 50) . "...\n"; // Tisknout začátek řetězce
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 // Převod obrázku 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 // Převod base64 na obrázek a uložení
20 public static void base64ToImage(String base64String, String outputPath) throws IOException {
21 // Odstranit předponu datové URL, pokud je přítomna
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) + "..."); // Tisknout začátek řetězce
36
37 base64ToImage(base64Image, "output.jpg");
38 }
39}
401using System;
2using System.IO;
3using System.Text.RegularExpressions;
4
5class Base64ImageConverter
6{
7 // Převod obrázku 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 // Převod base64 na obrázek a uložení
18 public static void Base64ToImage(string base64String, string outputPath)
19 {
20 // Odstranit předponu datové URL, pokud je přítomna
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) + "..."); // Tisknout začátek řetězce
34
35 Base64ToImage(base64Image, "output.jpg");
36 }
37}
381require 'base64'
2
3# Převod obrázku 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# Převod base64 na obrázek a uložení
11def base64_to_image(base64_string, output_path)
12 # Odstranit předponu datové URL, pokud je přítomna
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# Příklad použití
23base64_image = image_to_base64('input.jpg')
24puts base64_image[0, 50] + '...' # Tisknout začátek řetězce
25
26base64_to_image(base64_image, 'output.jpg')
271' Excel VBA funkce pro kódování souboru 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žití v Excelu:
27' =FileToBase64("C:\cesta\k\obrázku.jpg")
28Implementace HTML
Zde je způsob, jak vložit obrázek base64 přímo do HTML:
1<!-- Vkládání base64 obrázku přímo do HTML -->
2<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Base64 kódovaný obrázek">
3
4<!-- Použití CSS s base64 pozadím -->
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>
13Historie
Kódování Base64 má své kořeny ve vývoji elektronických poštovních systémů v 70. letech 20. století. Bylo navrženo k vyřešení problému přenosu binárních dat prostřednictvím systémů, které byly navrženy pouze pro zpracování textu ASCII.
Kódovací schéma bylo formalizováno v roce 1987 publikací RFC 989, která definovala standard Privacy Enhanced Mail (PEM). Tento standard byl později aktualizován v RFC 1421 a dalších souvisejících standardech. Termín "base64" sám o sobě pochází z toho, že kódování používá 64 různých ASCII znaků k reprezentaci binárních dat.
V kontextu webového vývoje získalo kódování obrázků v base64 popularitu s příchodem datových URI, které byly poprvé navrženy v RFC 2397 v roce 1998. To umožnilo zahrnout binární data přímo do HTML, CSS a dalších webových dokumentů.
Použití obrázků kódovaných v base64 ve webovém vývoji se stalo rozšířeným v polovině 2000. let, když se vývojáři snažili najít způsoby, jak snížit HTTP požadavky a zlepšit dobu načítání stránek. Technika byla zvlášť přijata během vzestupu mobilního webového vývoje, kde bylo minimalizování požadavků klíčové pro výkon na pomalejších mobilních připojeních.
Dnes zůstává kódování base64 důležitým nástrojem ve webovém vývoji, i když jeho použití se stalo cílenějším, jak se vyvinuly osvědčené postupy. Moderní přístupy obvykle používají kódování base64 selektivně pro malé, kritické obrázky, zatímco využívají efektivnější metody dodání, jako je HTTP/2 pro větší aktiva.
Odkazy
Zpětná vazba
Klikněte na toast se zpětnou vazbou a začněte dávat zpětnou vazbu o tomto nástroji
Související nástroje
Objevte další nástroje, které by mohly být užitečné pro váš pracovní postup