Base64-kuvadecoderi ja -katselija | Muunna Base64-kuvat
Dekoodaa ja esikatsele base64-koodattuja kuvajonoja välittömästi. Tukee JPEG-, PNG-, GIF- ja muita yleisiä muotoja virheenkäsittelyllä virheellisten syötteiden osalta.
Base64-kuvan dekooderi ja katselija
Liitä base64-koodattu kuvajono ja dekoodaa se nähdäksesi kuvan.
Kuvan esikatselu
Ei kuvaa näytettäväksi. Liitä base64-jono nähdäksesi sen automaattisesti dekoodattuna.
Tukee JPEG-, PNG-, GIF- ja muita yleisiä kuvamuotoja.
Ohjeet
1. Liitä base64-koodattu kuvajono yllä olevaan tekstikenttään.
2. Kuva dekoodataan automaattisesti kirjoittaessasi tai napsauta 'Dekoodaa kuva' -painiketta.
3. Dekoodattu kuva näkyy alla olevassa esikatselualueessa.
Huom: Jono pitäisi alkaa 'data:image/' parhaan tuloksen saamiseksi, mutta työkalu yrittää dekoodata myös ilman tätä etuliitettä.
Dokumentaatio
Base64-kuva-dekooderi ja -katseluohjelma
Johdanto
Base64 on binaarista tekstiksi koodausmenetelmä, joka esittää binaaridataa ASCII-merkkijonona. Sitä käytetään yleisesti kuvadataa upottamaan suoraan HTML:ään, CSS:ään, JavaScriptiin, JSON:iin ja muihin tekstipohjaisiin muotoihin, joihin binaaridataa ei voida suoraan sisällyttää. Tämä työkalu mahdollistaa base64-koodattujen kuvajonojen dekoodauksen ja tuloksena olevien kuvien katselun suoraan selaimessasi.
Base64-koodaus lisää datan kokoa noin 33 % alkuperäiseen binaariin verrattuna, mutta se mahdollistaa kuvien sisällyttämisen suoraan tekstipohjaisiin asiakirjoihin ilman erillisten tiedostojen lataamista. Tämä voi olla erityisen hyödyllistä pienille kuville, kuten kuvakkeille, logoille tai yksinkertaisille grafiikoille, joissa upottamisen mukavuus ylittää koon kasvun.
Base64-kuva-dekooderimme tarjoaa yksinkertaisen käyttöliittymän, johon voit liittää base64-koodatun kuvajonon ja nähdä heti dekoodatun kuvan. Se tukee kaikkia yleisiä kuvamuotoja, mukaan lukien JPEG, PNG, GIF, WebP ja SVG, ja se voi käsitellä sekä data URL -muotoa (jossa on data:image/... etuliite) että raakoja base64-jonoja.
Teknisiä tietoja
Base64-koodausmuoto
Base64-koodaus muuntaa binaaridatan 64 ASCII-merkin (A-Z, a-z, 0-9, + ja /) joukkoon, jossa = käytetään täydennykseen. Verkkokuville base64-data on tyypillisesti muotoiltu data URL:ksi seuraavalla rakenteella:
1data:[<media type>][;base64],<data>
2Esimerkiksi base64-koodattu PNG-kuva voi näyttää tältä:
1data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==
2Tämän muodon komponentit ovat:
data:- URL-skeemaimage/png- Datan MIME-tyyppi;base64- Koodausmenetelmä,- Eroin otsikon ja datan välillä- Itse base64-koodattu data
Dekoodausprosessi
Kun base64-kuvajono dekoodataan, seuraavat vaiheet tapahtuvat:
- Merkkijono analysoidaan selvittääkseen, sisältääkö se data URL -etuliitteen
- Jos etuliite on olemassa, MIME-tyyppi eristetään kuvan muodon määrittämiseksi
- Base64-dataportaali eristetään ja dekoodataan binaaridataksi
- Binaaridata muunnetaan Blob- tai objektin URL:ksi, joka voidaan näyttää kuvana
Jos syöte ei sisällä data URL -etuliitettä, dekooderi yrittää käsitellä sitä raakana base64-datana ja päättelee kuvatyypin dekoodatun binaaripään perusteella tai oletuksena PNG:ksi.
Tuetut kuvamuodot
Tämä työkalu tukee kaikkia yleisiä verkkokuvamuotoja:
| Muoto | MIME-tyyppi | Tyypilliset käyttötapaukset |
|---|---|---|
| JPEG | image/jpeg | Valokuvat, monimutkaiset kuvat, joissa on paljon värejä |
| PNG | image/png | Kuvia, jotka vaativat läpinäkyvyyttä, kuvakaappauksia, grafiikkaa |
| GIF | image/gif | Yksinkertaiset animaatiot, rajalliset väri-kuvat |
| WebP | image/webp | Moderni muoto, joka tarjoaa paremman pakkaussuhteen kuin JPEG/PNG |
| SVG | image/svg+xml | Vektorigrafiikka, skaalautuvat ikonit ja kuvitukset |
Käyttötapaukset
Base64-koodatuilla kuvilla on useita käytännön sovelluksia verkkokehityksessä ja sen ulkopuolella:
-
Kuvien upottaminen HTML:ään/CSS:ään/JS:ään: Vähentää HTTP-pyyntöjä sisällyttämällä kuvia suoraan koodiin, mikä voi parantaa sivun latausaikoja pienille kuville.
-
Sähköpostimallit: Varmistaa, että kuvat näkyvät oikein sähköpostiasiakkaissa, jotka estävät ulkoiset kuvat oletusarvoisesti.
-
Yhden tiedoston sovellukset: Luo itse asiassa HTML-sovelluksia, joissa kaikki resurssit on upotettu yhteen tiedostoon.
-
API-vastaukset: Sisällyttää kuvadata suoraan JSON-vastauksiin ilman erillisiä kuvapisteitä.
-
Data URIs CSS:ssä: Upottaa pieniä kuvakkeita ja taustakuvia suoraan CSS-tiedostoihin.
-
Canvas-manipulaatiot: Helpottaa canvas-kuvadataan tallentamista ja siirtämistä.
-
Offline-sovellukset: Tallentaa kuvia tekstijonoina localStorageen tai IndexedDB:hen.
Suorituskykyhuomiot
Vaikka base64-koodaus tarjoaa mukavuutta, siihen liittyy kauppasopimuksia:
- Koon kasvu: Base64-koodaus lisää datan kokoa noin 33 %.
- Ei selaimen välimuistia: Upotettuja kuvia ei voida välimuistittaa erikseen kuin ulkoisia kuvafailia.
- Jäsentämisen ylikuormitus: Selainten on dekoodattava base64-merkkijono ennen renderöintiä.
- Ylläpiton haasteet: Upotetut kuvat ovat vaikeampia päivittää kuin viitatut tiedostot.
Optimaalisen suorituskyvyn saavuttamiseksi base64-koodaus on yleensä suositeltavaa vain pienille kuville (alle 10 kt). Suuremmat kuvat palvelevat yleensä paremmin erillisinä tiedostoina, joita voidaan oikein välimuistittaa ja optimoida.
Vaihtoehdot
Useita vaihtoehtoja base64-koodaukselle on olemassa eri käyttötapauksille:
-
SVG-inline upottaminen: Vektorigrafiikoille inline SVG tarjoaa usein paremman suorituskyvyn ja joustavuuden kuin base64-koodattu SVG.
-
WebP ja modernit kuvamuodot: Nämä tarjoavat paremman pakkaussuhteen kuin base64-koodattu JPEG/PNG.
-
Kuvapikselit: Yhdistää useita pieniä kuvia yhdeksi tiedostoksi ja käyttää CSS-asettelua.
-
CDN:t (Content Delivery Networks): Tuotantosivustoille optimoitujen kuvien tarjoaminen CDN:stä on usein tehokkaampaa.
-
Datan pakkaus: Suurten binaaridatan siirtämiseen erikoistuneet pakkausalgoritmit, kuten gzip tai Brotli, ovat tehokkaampia kuin base64.
Koodiesimerkit
Tässä on esimerkkejä base64-koodattujen kuvien käsittelystä eri ohjelmointikielillä:
1// Muunna kuva base64-muotoon JavaScriptissä (selaimessa)
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 // Hanki data URL:na (base64-merkkijonona)
11 return canvas.toDataURL('image/png');
12}
13
14// Näytä base64-kuva
15function displayBase64Image(base64String) {
16 const img = new Image();
17
18 // Käsittele merkkijonoja, joissa ei ole data URL -etuliitettä
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# Muunna kuva tiedostosta base64-muotoon
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# Muunna base64 kuva ja tallenna
12def base64_to_image(base64_string, output_path):
13 # Poista data URL -etuliite, jos se on olemassa
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# Esimerkkikäyttö
22base64_str = image_to_base64("input.jpg")
23print(f"data:image/jpeg;base64,{base64_str[:30]}...") # Tulosta merkkijonon alku
24
25base64_to_image(base64_str, "output.jpg")
261<?php
2// Muunna kuva tiedostosta base64-muotoon PHP:ssä
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// Muunna base64 kuva ja tallenna
10function base64ToImage($base64String, $outputPath) {
11 // Eristä base64-koodattu binaaridata
12 $imageData = explode(',', $base64String);
13 $imageData = isset($imageData[1]) ? $imageData[1] : $imageData[0];
14
15 // Dekoodaa ja tallenna
16 $data = base64_decode($imageData);
17 file_put_contents($outputPath, $data);
18}
19
20// Esimerkkikäyttö
21$base64Image = imageToBase64('input.jpg');
22echo substr($base64Image, 0, 50) . "...\n"; // Tulosta merkkijonon alku
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 // Muunna kuva tiedostosta base64-muotoon
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 // Muunna base64 kuva ja tallenna
20 public static void base64ToImage(String base64String, String outputPath) throws IOException {
21 // Poista data URL -etuliite, jos se on olemassa
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) + "..."); // Tulosta merkkijonon alku
36
37 base64ToImage(base64Image, "output.jpg");
38 }
39}
401using System;
2using System.IO;
3using System.Text.RegularExpressions;
4
5class Base64ImageConverter
6{
7 // Muunna kuva tiedostosta base64-muotoon
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 // Muunna base64 kuva ja tallenna
18 public static void Base64ToImage(string base64String, string outputPath)
19 {
20 // Poista data URL -etuliite, jos se on olemassa
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) + "..."); // Tulosta merkkijonon alku
34
35 Base64ToImage(base64Image, "output.jpg");
36 }
37}
381require 'base64'
2
3# Muunna kuva tiedostosta base64-muotoon
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# Muunna base64 kuva ja tallenna
11def base64_to_image(base64_string, output_path)
12 # Poista data URL -etuliite, jos se on olemassa
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# Esimerkkikäyttö
23base64_image = image_to_base64('input.jpg')
24puts base64_image[0, 50] + '...' # Tulosta merkkijonon alku
25
26base64_to_image(base64_image, 'output.jpg')
271' Excel VBA -toiminto tiedoston koodaukseen base64-muotoon
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' Käyttö Excelissä:
27' =FileToBase64("C:\polku\kuva.jpg")
28HTML-toteutus
Tässä on, miten upottaa base64-kuva suoraan HTML:ään:
1<!-- Base64-kuvan upottaminen suoraan HTML:ään -->
2<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Base64-koodattu kuva">
3
4<!-- Käyttämällä CSS:ää base64-taustakuvalla -->
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>
13Historia
Base64-koodauksen juuret ulottuvat sähköpostijärjestelmien kehittämiseen 1970-luvulla. Sen tarkoituksena oli ratkaista binaaridatan siirtämiseen liittyvät ongelmat järjestelmissä, jotka oli suunniteltu käsittelemään vain ASCII-tekstiä.
Koodausmenetelmä virallistettiin vuonna 1987, kun julkaistiin RFC 989, joka määritteli Privacy Enhanced Mail (PEM) -standardin. Tämä päivitettiin myöhemmin RFC 1421:ssä ja muissa liittyvissä standardeissa. Termi "base64" itsessään tulee siitä, että koodaus käyttää 64 erilaista ASCII-merkkiä binaaridatan esittämiseen.
Verkkokehityksen yhteydessä base64-koodattujen kuvien käyttö sai suosiota data URItin myötä, joka ehdotettiin ensimmäisen kerran RFC 2397:ssä vuonna 1998. Tämä mahdollisti binaaridatan sisällyttämisen suoraan HTML:ään, CSS:ään ja muihin verkkodokumentteihin.
Base64-koodattujen kuvien käyttö verkkokehityksessä yleistyi 2000-luvun puolivälissä, kun kehittäjät etsivät tapoja vähentää HTTP-pyyntöjä ja parantaa sivun latausaikoja. Tekniikkaa omaksuttiin erityisesti mobiiliverkkokehityksen nousun aikana, jolloin pyyntöjen minimointi oli ratkaisevan tärkeää hitaammilla mobiiliverkoilla.
Nykyään base64-koodaus on edelleen tärkeä työkalu verkkokehityksessä, vaikka sen käyttö on tullut kohdennetummaksi parhaita käytäntöjä kehitettäessä. Nykyiset lähestymistavat suosivat base64-koodausta valikoivasti pienille, kriittisille kuville, kun taas suuremmat resurssit toimitetaan tehokkaammin HTTP/2:n avulla.
Viitteet
Palaute
Klikkaa palautetoastia aloittaaksesi palautteen antamisen tästä työkalusta
Liittyvät Työkalut
Löydä lisää työkaluja, jotka saattavat olla hyödyllisiä työnkulullesi