Dekoder in oglednik slik v formatu Base64 | Pretvori Base64 v slike

Takoj dekodirajte in predogledajte niz slik v formatu base64. Podpira JPEG, PNG, GIF in druge pogoste formate ter obravnava napake za neveljavne vnose.

Dekoder in ogledovalnik slik v formatu Base64

Prilepite niz slike v formatu base64 in ga dekodirajte za ogled slike.

Predogled slike

Ni slike za prikaz. Prilepite niz base64, da jo avtomatsko dekodirate.

Podpira JPEG, PNG, GIF in druge pogoste formate slik.

Navodila

1. Prilepite niz slike v formatu base64 v zgornje besedilno polje.

2. Slika se bo avtomatsko dekodirala, ko boste tipkali, ali kliknite gumb 'Dekodiraj sliko'.

3. Dekodirana slika se bo pojavila v predoglednem območju spodaj.

Opomba: Niz se mora začeti z 'data:image/' za najboljše rezultate, vendar bo orodje poskušalo dekodirati nize brez te predpone.

📚

Dokumentacija

Dekoder in gledalnik slik v Base64

Uvod

Base64 je shema kodiranja binarnega v besedilo, ki predstavlja binarne podatke v formatu ASCII niza. Pogosto se uporablja za vdelavo podatkov slik neposredno v HTML, CSS, JavaScript, JSON in druge besedilne formate, kjer binarni podatki ne morejo biti neposredno vključeni. Ta orodje vam omogoča, da dekodirate slike, kodirane v base64, in takoj vidite rezultate slik neposredno v vašem brskalniku.

Kodiranje base64 poveča velikost podatkov za približno 33 % v primerjavi z izvirnim binarnim formatom, vendar omogoča, da se slike vključijo neposredno v besedilne dokumente brez potrebe po ločenih prenosih datotek. To je lahko še posebej uporabno za majhne slike, kot so ikone, logotipi ali preproste grafike, kjer prednost udobja vdelave presega povečanje velikosti.

Naše orodje za dekodiranje slik v base64 ponuja preprost vmesnik, kjer lahko prilepite niz slik, kodiran v base64, in takoj vidite dekodirano sliko. Podpira vse običajne formate slik, vključno z JPEG, PNG, GIF, WebP in SVG, ter lahko obravnava tako format podatkovne URL (s predpono data:image/...) kot surove nize base64.

Tehnične podrobnosti

Format kodiranja Base64

Kodiranje base64 pretvarja binarne podatke v niz 64 ASCII znakov (A-Z, a-z, 0-9, + in /), z =, ki se uporablja za oblogo. Za slike na spletu so podatki base64 običajno oblikovani kot podatkovna URL z naslednjo strukturo:

1data:[<media type>][;base64],<data>
2

Na primer, slika PNG, kodirana v base64, bi lahko izgledala takole:

1data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==
2

Komponente te oblike so:

data: - URL shema
image/png - MIME tip podatkov
;base64 - metoda kodiranja
, - ločilo med glavo in podatki
dejanski podatki, kodirani v base64

Proces dekodiranja

Pri dekodiranju niza slik v base64 se zgodijo naslednji koraki:

Niz se analizira, da se ugotovi, ali vsebuje predpono podatkovne URL
Če predpona obstaja, se izlušči MIME tip, da se določi format slike
Del base64 podatkov se izolira in dekodira v binarne podatke
Binarni podatki se pretvorijo v Blob ali objektno URL, ki se lahko prikaže kot slika

Če vhod ne vključuje predpone podatkovne URL, se dekoder poskuša obravnavati kot surove podatke base64 in domneva tip slike iz dekodirane binarne glave ali privzeto na PNG.

Podprti formati slik

To orodje podpira vse običajne formate slik na spletu:

Format	MIME tip	Tipični primeri uporabe
JPEG	image/jpeg	Fotografije, kompleksne slike z mnogimi barvami
PNG	image/png	Slike, ki zahtevajo prosojnost, posnetki zaslona, grafike
GIF	image/gif	Preproste animacije, slike z omejeno barvno paleto
WebP	image/webp	Sodobni format z boljšo stiskalno razmerjem kot JPEG/PNG
SVG	image/svg+xml	Vektorske grafike, skalabilne ikone in ilustracije

Primeri uporabe

Slike, kodirane v base64, imajo več praktičnih aplikacij v razvoju spletnih strani in drugje:

Vdelava slik v HTML/CSS/JS: Zmanjšuje HTTP zahteve z vključitvijo slik neposredno v vašo kodo, kar lahko izboljša čas nalaganja strani za majhne slike.
Predloge e-pošte: Zagotavlja, da se slike pravilno prikažejo v odjemalcih e-pošte, ki privzeto blokirajo zunanje slike.
Enotne datotečne aplikacije: Ustvari samostojne HTML aplikacije, kjer so vsi viri vdelani v eno samo datoteko.
Odgovori API: Vključuje podatke o slikah neposredno v JSON odgovore, ne da bi bilo potrebno ločene končne točke za slike.
Podatkovne URI v CSS: Vdelava majhnih ikon in ozadij neposredno v CSS datoteke.
Manipulacije s platnom: Olajša shranjevanje in prenos podatkov slik platna.
Offline aplikacije: Shranjuje slike kot besedilne nize v localStorage ali IndexedDB.

Razmišljanja o zmogljivosti

Čeprav kodiranje v base64 ponuja udobje, prinaša tudi kompromis:

Povečana velikost datoteke: Kodiranje v base64 povečuje velikost podatkov za približno 33 %.
Brez predpomnjenja brskalnika: Vdelane slike se ne morejo ločeno predpomniti kot zunanje slikovne datoteke.
Preobremenitev pri analizi: Brskalniki morajo dekodirati niz base64, preden ga prikažejo.
Izzivi pri vzdrževanju: Vdelane slike so težje posodobiti kot sklicevane datoteke.

Za optimalno zmogljivost se kodiranje v base64 običajno priporoča le za majhne slike (pod 10KB). Večje slike so običajno bolje postrežene kot ločene datoteke, ki jih je mogoče pravilno predpomniti in optimizirati.

Alternativa

Obstaja več alternativ kodiranju v base64 za različne primere uporabe:

Inline vdelava SVG: Za vektorske grafike inline SVG pogosto zagotavlja boljšo zmogljivost in prilagodljivost kot kodiran SVG v base64.
WebP in sodobni formati slik: Ti zagotavljajo boljšo stiskalno razmerje kot kodirane JPEG/PNG v base64.
Slike sprite: Združevanje več majhnih slik v eno samo datoteko in uporaba CSS pozicioniranja.
CDN (omrežja za dostavo vsebine): Za produkcijske strani je pogosto bolj učinkovito serviranje optimiziranih slik iz CDN.
Stiskanje podatkov: Za prenos velikih količin binarnih podatkov so specializirani algoritmi za stiskanje, kot sta gzip ali Brotli, bolj učinkoviti kot base64.

Kode Primeri

Tukaj so primeri dela s slikami, kodiranimi v base64, v različnih programskih jezikih:

1// Pretvorba slike v base64 v JavaScript (brskalnik)
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  // Pridobi kot podatkovno URL (niz base64)
11  return canvas.toDataURL('image/png');
12}
13
14// Prikaži sliko v base64
15function displayBase64Image(base64String) {
16  const img = new Image();
17  
18  // Obdelava nizov brez predpone podatkovne 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}
26

1import base64
2from PIL import Image
3from io import BytesIO
4
5# Pretvorba slikovne datoteke v 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# Pretvorba base64 v sliko in shranjevanje
12def base64_to_image(base64_string, output_path):
13    # Odstrani predpono podatkovne URL, če je prisotna
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# Primer uporabe
22base64_str = image_to_base64("input.jpg")
23print(f"data:image/jpeg;base64,{base64_str[:30]}...") # Natisni začetek niza
24
25base64_to_image(base64_str, "output.jpg")
26

1<?php
2// Pretvorba slikovne datoteke v 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// Pretvorba base64 v sliko in shranjevanje
10function base64ToImage($base64String, $outputPath) {
11    // Izvleči kodirane binarne podatke v base64
12    $imageData = explode(',', $base64String);
13    $imageData = isset($imageData[1]) ? $imageData[1] : $imageData[0];
14    
15    // Dekodiraj in shrani
16    $data = base64_decode($imageData);
17    file_put_contents($outputPath, $data);
18}
19
20// Primer uporabe
21$base64Image = imageToBase64('input.jpg');
22echo substr($base64Image, 0, 50) . "...\n"; // Natisni začetek niza
23
24base64ToImage($base64Image, 'output.jpg');
25?>
26

1import 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    // Pretvorba slikovne datoteke v 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    // Pretvorba base64 v sliko in shranjevanje
20    public static void base64ToImage(String base64String, String outputPath) throws IOException {
21        // Odstrani predpono podatkovne URL, če je prisotna
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) + "..."); // Natisni začetek niza
36        
37        base64ToImage(base64Image, "output.jpg");
38    }
39}
40

1using System;
2using System.IO;
3using System.Text.RegularExpressions;
4
5class Base64ImageConverter
6{
7    // Pretvorba slikovne datoteke v 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    // Pretvorba base64 v sliko in shranjevanje
18    public static void Base64ToImage(string base64String, string outputPath)
19    {
20        // Odstrani predpono podatkovne URL, če je prisotna
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) + "..."); // Natisni začetek niza
34        
35        Base64ToImage(base64Image, "output.jpg");
36    }
37}
38

1require 'base64'
2
3# Pretvorba slikovne datoteke v 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# Pretvorba base64 v sliko in shranjevanje
11def base64_to_image(base64_string, output_path)
12  # Odstrani predpono podatkovne URL, če je prisotna
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# Primer uporabe
23base64_image = image_to_base64('input.jpg')
24puts base64_image[0, 50] + '...' # Natisni začetek niza
25
26base64_to_image(base64_image, 'output.jpg')
27

1' Excel VBA funkcija za kodiranje datoteke v 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' Uporaba v Excelu:
27' =FileToBase64("C:\pot\do\slike.jpg")
28

Implementacija HTML

Tukaj je, kako vdelati sliko v base64 neposredno v HTML:

1<!-- Vdelava slike v base64 neposredno v HTML -->
2<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Slika kodirana v Base64">
3
4<!-- Uporaba CSS z osnovno sliko v 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>
13

Zgodovina

Kodiranje base64 ima svoje korenine v razvoju sistemov elektronske pošte v 70. letih prejšnjega stoletja. Zasnovano je bilo za reševanje problema prenosa binarnih podatkov prek sistemov, ki so bili zasnovani za obravnavo le besedila ASCII.

Shema kodiranja je bila formalizirana leta 1987 s publikacijo RFC 989, ki je opredelila standard za zaščiteno elektronsko pošto (PEM). To je bilo kasneje posodobljeno v RFC 1421 in druge sorodne standarde. Izraz "base64" izhaja iz dejstva, da kodiranje uporablja 64 različnih ASCII znakov za predstavitev binarnih podatkov.

V kontekstu razvoja spletnih strani je kodiranje slik v base64 pridobilo priljubljenost z nastankom podatkovnih URI, ki so bili prvič predlagani v RFC 2397 leta 1998. To je omogočilo, da se binarni podatki vključijo neposredno v HTML, CSS in druge spletne dokumente.

Uporaba slik, kodiranih v base64, v razvoju spletnih strani je postala bolj razširjena sredi 2000-ih, ko so razvijalci iskali načine za zmanjšanje HTTP zahtev in izboljšanje časov nalaganja strani. Tehnika je bila še posebej sprejeta med porastom mobilnega razvoja spletnih strani, kjer je bilo zmanjšanje zahtev ključnega pomena za zmogljivost na počasnejših mobilnih povezavah.

Danes kodiranje v base64 ostaja pomembno orodje v razvoju spletnih strani, čeprav se je njegova uporaba postala bolj ciljno usmerjena, saj so se razvile najboljše prakse. Sodobni pristopi ponavadi uporabljajo kodiranje v base64 selektivno za majhne, ključne slike, medtem ko za večje vire izkoriščajo učinkovitejše metode dostave, kot je HTTP/2.

Reference

💬

Povratne informacije

💬

Kliknite na toast za povratne informacije, da začnete dajati povratne informacije o tem orodju

🔗

Sorodne orodja

Odkrijte več orodij, ki bi lahko bila koristna za vaš delovni proces