Whiz Tools

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ä.

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:

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

Esimerkiksi base64-koodattu PNG-kuva voi näyttää tältä:

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

Tämän muodon komponentit ovat:

  • data: - URL-skeema
  • image/png - Datan MIME-tyyppi
  • ;base64 - Koodausmenetelmä
  • , - Eroin otsikon ja datan välillä
  • Itse base64-koodattu data

Dekoodausprosessi

Kun base64-kuvajono dekoodataan, seuraavat vaiheet tapahtuvat:

  1. Merkkijono analysoidaan selvittääkseen, sisältääkö se data URL -etuliitteen
  2. Jos etuliite on olemassa, MIME-tyyppi eristetään kuvan muodon määrittämiseksi
  3. Base64-dataportaali eristetään ja dekoodataan binaaridataksi
  4. 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:

MuotoMIME-tyyppiTyypilliset käyttötapaukset
JPEGimage/jpegValokuvat, monimutkaiset kuvat, joissa on paljon värejä
PNGimage/pngKuvia, jotka vaativat läpinäkyvyyttä, kuvakaappauksia, grafiikkaa
GIFimage/gifYksinkertaiset animaatiot, rajalliset väri-kuvat
WebPimage/webpModerni muoto, joka tarjoaa paremman pakkaussuhteen kuin JPEG/PNG
SVGimage/svg+xmlVektorigrafiikka, skaalautuvat ikonit ja kuvitukset

Käyttötapaukset

Base64-koodatuilla kuvilla on useita käytännön sovelluksia verkkokehityksessä ja sen ulkopuolella:

  1. 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.

  2. Sähköpostimallit: Varmistaa, että kuvat näkyvät oikein sähköpostiasiakkaissa, jotka estävät ulkoiset kuvat oletusarvoisesti.

  3. Yhden tiedoston sovellukset: Luo itse asiassa HTML-sovelluksia, joissa kaikki resurssit on upotettu yhteen tiedostoon.

  4. API-vastaukset: Sisällyttää kuvadata suoraan JSON-vastauksiin ilman erillisiä kuvapisteitä.

  5. Data URIs CSS:ssä: Upottaa pieniä kuvakkeita ja taustakuvia suoraan CSS-tiedostoihin.

  6. Canvas-manipulaatiot: Helpottaa canvas-kuvadataan tallentamista ja siirtämistä.

  7. 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:

  1. SVG-inline upottaminen: Vektorigrafiikoille inline SVG tarjoaa usein paremman suorituskyvyn ja joustavuuden kuin base64-koodattu SVG.

  2. WebP ja modernit kuvamuodot: Nämä tarjoavat paremman pakkaussuhteen kuin base64-koodattu JPEG/PNG.

  3. Kuvapikselit: Yhdistää useita pieniä kuvia yhdeksi tiedostoksi ja käyttää CSS-asettelua.

  4. CDN:t (Content Delivery Networks): Tuotantosivustoille optimoitujen kuvien tarjoaminen CDN:stä on usein tehokkaampaa.

  5. 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ä:

// Muunna kuva base64-muotoon JavaScriptissä (selaimessa)
function imageToBase64(imgElement) {
  const canvas = document.createElement('canvas');
  canvas.width = imgElement.width;
  canvas.height = imgElement.height;
  
  const ctx = canvas.getContext('2d');
  ctx.drawImage(imgElement, 0, 0);
  
  // Hanki data URL:na (base64-merkkijonona)
  return canvas.toDataURL('image/png');
}

// Näytä base64-kuva
function displayBase64Image(base64String) {
  const img = new Image();
  
  // Käsittele merkkijonoja, joissa ei ole data URL -etuliitettä
  if (!base64String.startsWith('data:')) {
    base64String = `data:image/png;base64,${base64String}`;
  }
  
  img.src = base64String;
  document.body.appendChild(img);
}
import base64
from PIL import Image
from io import BytesIO

# Muunna kuva tiedostosta base64-muotoon
def image_to_base64(image_path):
    with open(image_path, "rb") as image_file:
        encoded_string = base64.b64encode(image_file.read())
        return encoded_string.decode('utf-8')

# Muunna base64 kuva ja tallenna
def base64_to_image(base64_string, output_path):
    # Poista data URL -etuliite, jos se on olemassa
    if ',' in base64_string:
        base64_string = base64_string.split(',')[1]
    
    image_data = base64.b64decode(base64_string)
    image = Image.open(BytesIO(image_data))
    image.save(output_path)

# Esimerkkikäyttö
base64_str = image_to_base64("input.jpg")
print(f"data:image/jpeg;base64,{base64_str[:30]}...") # Tulosta merkkijonon alku

base64_to_image(base64_str, "output.jpg")
<?php
// Muunna kuva tiedostosta base64-muotoon PHP:ssä
function imageToBase64($path) {
    $type = pathinfo($path, PATHINFO_EXTENSION);
    $data = file_get_contents($path);
    return 'data:image/' . $type . ';base64,' . base64_encode($data);
}

// Muunna base64 kuva ja tallenna
function base64ToImage($base64String, $outputPath) {
    // Eristä base64-koodattu binaaridata
    $imageData = explode(',', $base64String);
    $imageData = isset($imageData[1]) ? $imageData[1] : $imageData[0];
    
    // Dekoodaa ja tallenna
    $data = base64_decode($imageData);
    file_put_contents($outputPath, $data);
}

// Esimerkkikäyttö
$base64Image = imageToBase64('input.jpg');
echo substr($base64Image, 0, 50) . "...\n"; // Tulosta merkkijonon alku

base64ToImage($base64Image, 'output.jpg');
?>
import java.io.File;
import java.io.FileOutputStream;
import java.io.IOException;
import java.nio.file.Files;
import java.util.Base64;

public class Base64ImageUtil {
    
    // Muunna kuva tiedostosta base64-muotoon
    public static String imageToBase64(String imagePath) throws IOException {
        File file = new File(imagePath);
        byte[] fileContent = Files.readAllBytes(file.toPath());
        String extension = imagePath.substring(imagePath.lastIndexOf(".") + 1);
        String base64String = Base64.getEncoder().encodeToString(fileContent);
        
        return "data:image/" + extension + ";base64," + base64String;
    }
    
    // Muunna base64 kuva ja tallenna
    public static void base64ToImage(String base64String, String outputPath) throws IOException {
        // Poista data URL -etuliite, jos se on olemassa
        if (base64String.contains(",")) {
            base64String = base64String.split(",")[1];
        }
        
        byte[] decodedBytes = Base64.getDecoder().decode(base64String);
        
        try (FileOutputStream fos = new FileOutputStream(outputPath)) {
            fos.write(decodedBytes);
        }
    }
    
    public static void main(String[] args) throws IOException {
        String base64Image = imageToBase64("input.jpg");
        System.out.println(base64Image.substring(0, 50) + "..."); // Tulosta merkkijonon alku
        
        base64ToImage(base64Image, "output.jpg");
    }
}
using System;
using System.IO;
using System.Text.RegularExpressions;

class Base64ImageConverter
{
    // Muunna kuva tiedostosta base64-muotoon
    public static string ImageToBase64(string imagePath)
    {
        byte[] imageBytes = File.ReadAllBytes(imagePath);
        string base64String = Convert.ToBase64String(imageBytes);
        
        string extension = Path.GetExtension(imagePath).TrimStart('.').ToLower();
        return $"data:image/{extension};base64,{base64String}";
    }
    
    // Muunna base64 kuva ja tallenna
    public static void Base64ToImage(string base64String, string outputPath)
    {
        // Poista data URL -etuliite, jos se on olemassa
        if (base64String.Contains(","))
        {
            base64String = base64String.Split(',')[1];
        }
        
        byte[] imageBytes = Convert.FromBase64String(base64String);
        File.WriteAllBytes(outputPath, imageBytes);
    }
    
    static void Main()
    {
        string base64Image = ImageToBase64("input.jpg");
        Console.WriteLine(base64Image.Substring(0, 50) + "..."); // Tulosta merkkijonon alku
        
        Base64ToImage(base64Image, "output.jpg");
    }
}
require 'base64'

# Muunna kuva tiedostosta base64-muotoon
def image_to_base64(image_path)
  extension = File.extname(image_path).delete('.')
  base64_data = Base64.strict_encode64(File.read(image_path))
  "data:image/#{extension};base64,#{base64_data}"
end

# Muunna base64 kuva ja tallenna
def base64_to_image(base64_string, output_path)
  # Poista data URL -etuliite, jos se on olemassa
  if base64_string.include?(',')
    base64_string = base64_string.split(',')[1]
  end
  
  File.open(output_path, 'wb') do |file|
    file.write(Base64.decode64(base64_string))
  end
end

# Esimerkkikäyttö
base64_image = image_to_base64('input.jpg')
puts base64_image[0, 50] + '...' # Tulosta merkkijonon alku

base64_to_image(base64_image, 'output.jpg')
' Excel VBA -toiminto tiedoston koodaukseen base64-muotoon
Function FileToBase64(filePath As String) As String
    Dim fileNum As Integer
    Dim fileData() As Byte
    Dim objXML As Object
    Dim objNode As Object
    
    fileNum = FreeFile
    Open filePath For Binary Access Read As fileNum
    ReDim fileData(LOF(fileNum) - 1)
    Get fileNum, , fileData
    Close fileNum
    
    Set objXML = CreateObject("MSXML2.DOMDocument")
    Set objNode = objXML.createElement("b64")
    
    objNode.DataType = "bin.base64"
    objNode.nodeTypedValue = fileData
    
    FileToBase64 = objNode.Text
    
    Set objNode = Nothing
    Set objXML = Nothing
End Function

' Käyttö Excelissä:
' =FileToBase64("C:\polku\kuva.jpg")

HTML-toteutus

Tässä on, miten upottaa base64-kuva suoraan HTML:ään:

<!-- Base64-kuvan upottaminen suoraan HTML:ään -->
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Base64-koodattu kuva">

<!-- Käyttämällä CSS:ää base64-taustakuvalla -->
<style>
.base64-bg {
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==');
  width: 100px;
  height: 100px;
}
</style>
<div class="base64-bg"></div>

Historia

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

  1. RFC 4648: The Base16, Base32, and Base64 Data Encodings
  2. RFC 2397: The "data" URL scheme
  3. MDN Web Docs: data URIs
  4. CSS-Tricks: Data URIs
  5. Base64-kuva-kooderi
  6. Can I Use: Data URIs
  7. Verkkosuorituskyky: Milloin base64-koodata kuvat (ja milloin ei)
Palaute