Pengekod dan Penampil Imej Base64 | Tukar Base64 kepada Imej

Dekod dan pratonton rentetan imej yang dikodkan dalam base64 dengan serta-merta. Menyokong format biasa seperti JPEG, PNG, GIF dan pengendalian ralat untuk input yang tidak sah.

Pengekod dan Pemandu Imej Base64

Tampal rentetan imej yang dikodkan dalam base64 dan dekodkan untuk melihat imej.

Pratonton Imej

Tiada imej untuk dipaparkan. Tampal rentetan base64 untuk melihatnya didekod secara automatik.

Menyokong format JPEG, PNG, GIF dan format imej biasa yang lain.

Arahan

1. Tampal rentetan imej yang dikodkan dalam base64 di kawasan teks di atas.

2. Imej akan didekod secara automatik semasa anda menaip, atau klik butang 'Dekod Imej'.

3. Imej yang telah didekod akan muncul di kawasan pratonton di bawah.

Nota: Rentetan harus bermula dengan 'data:image/' untuk hasil terbaik, tetapi alat ini akan berusaha untuk mendekod rentetan tanpa awalan ini juga.

📚

Dokumentasi

Pengkod dan Penampil Imej Base64

Pengenalan

Base64 adalah skema pengekodan binari-ke-teks yang mewakili data binari dalam format rentetan ASCII. Ia biasanya digunakan untuk menyematkan data imej secara langsung dalam HTML, CSS, JavaScript, JSON, dan format berasaskan teks lain di mana data binari tidak dapat disertakan secara langsung. Alat ini membolehkan anda menguraikan rentetan imej yang dikodkan dalam base64 dan melihat imej yang dihasilkan secara langsung di pelayar anda.

Pengekodan Base64 meningkatkan saiz data sebanyak kira-kira 33% berbanding dengan binari asal, tetapi ia membolehkan imej disertakan secara langsung dalam dokumen berasaskan teks tanpa memerlukan muat turun fail yang berasingan. Ini boleh menjadi sangat berguna untuk imej kecil seperti ikon, logo, atau grafik sederhana di mana kemudahan penyematan melebihi peningkatan saiz.

Alat Pengkod Imej Base64 kami menyediakan antara muka yang mudah di mana anda boleh menampal rentetan imej yang dikodkan dalam base64 dan melihat imej yang diuraikan dengan serta-merta. Ia menyokong semua format imej biasa termasuk JPEG, PNG, GIF, WebP, dan SVG, dan boleh menangani kedua-dua format URL data (dengan awalan data:image/...) dan rentetan base64 mentah.

Butiran Teknikal

Format Pengekodan Base64

Pengekodan Base64 menukar data binari menjadi satu set 64 watak ASCII (A-Z, a-z, 0-9, +, dan /), dengan = digunakan untuk pengisian. Untuk imej di web, data base64 biasanya diformat sebagai URL data dengan struktur berikut:

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

Sebagai contoh, imej PNG yang dikodkan dalam base64 mungkin kelihatan seperti:

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

Komponen format ini adalah:

data: - Skim URL
image/png - Jenis MIME data
;base64 - Kaedah pengekodan
, - Pemisah antara header dan data
Data base64 yang dikodkan yang sebenar

Proses Penguraian

Apabila menguraikan rentetan imej base64, langkah-langkah berikut berlaku:

Rentetan dianalisis untuk mengenal pasti jika ia mengandungi awalan URL data
Jika awalan wujud, jenis MIME diekstrak untuk menentukan format imej
Bahagian data base64 diasingkan dan diuraikan menjadi data binari
Data binari ditukar menjadi Blob atau URL objek yang boleh dipaparkan sebagai imej

Jika input tidak termasuk awalan URL data, pengurai cuba menganggapnya sebagai data base64 mentah dan mengandaikan jenis imej daripada header binari yang diuraikan atau secara lalai kepada PNG.

Format Imej yang Disokong

Alat ini menyokong semua format imej web biasa:

Format	Jenis MIME	Kes Penggunaan Tipikal
JPEG	image/jpeg	Foto, imej kompleks dengan banyak warna
PNG	image/png	Imej yang memerlukan ketelusan, tangkapan skrin, grafik
GIF	image/gif	Animasi sederhana, imej dengan warna terhad
WebP	image/webp	Format moden dengan pemampatan yang lebih baik daripada JPEG/PNG
SVG	image/svg+xml	Grafik vektor, ikon dan ilustrasi yang boleh diskalakan

Kes Penggunaan

Imej yang dikodkan dalam base64 mempunyai beberapa aplikasi praktikal dalam pembangunan web dan sebaliknya:

Menyematkan imej dalam HTML/CSS/JS: Mengurangkan permintaan HTTP dengan menyertakan imej secara langsung dalam kod anda, yang boleh meningkatkan masa muat halaman untuk imej kecil.
Templat emel: Memastikan imej dipaparkan dengan betul dalam klien emel yang menyekat imej luar secara lalai.
Aplikasi fail tunggal: Membuat aplikasi HTML yang berdiri sendiri di mana semua sumber disematkan dalam satu fail.
Tindak balas API: Menyertakan data imej secara langsung dalam tindak balas JSON tanpa memerlukan titik akhir imej yang berasingan.
URL data dalam CSS: Menyematkan ikon kecil dan imej latar secara langsung dalam fail CSS.
Manipulasi kanvas: Memudahkan penyimpanan dan pemindahan data imej kanvas.
Aplikasi luar talian: Menyimpan imej sebagai rentetan teks dalam localStorage atau IndexedDB.

Pertimbangan Prestasi

Walaupun pengekodan base64 menawarkan kemudahan, ia datang dengan pertukaran:

Saiz fail yang meningkat: Pengekodan base64 meningkatkan saiz data sebanyak kira-kira 33%.
Tiada caching pelayar: Imej yang disematkan tidak boleh disimpan dalam cache secara berasingan seperti fail imej luar.
Beban penguraian: Pelayar mesti menguraikan rentetan base64 sebelum memaparkan.
Cabaran penyelenggaraan: Imej yang disematkan lebih sukar untuk dikemas kini daripada fail yang dirujuk.

Untuk prestasi yang optimum, pengekodan base64 biasanya disyorkan hanya untuk imej kecil (di bawah 10KB). Imej yang lebih besar biasanya lebih baik disajikan sebagai fail berasingan yang boleh disimpan dalam cache dan dioptimumkan dengan betul.

Alternatif

Terdapat beberapa alternatif kepada pengekodan base64 untuk pelbagai kes penggunaan:

Penyematan SVG dalam talian: Untuk grafik vektor, SVG dalam talian sering memberikan prestasi dan fleksibiliti yang lebih baik daripada SVG yang dikodkan dalam base64.
WebP dan format imej moden: Ini memberikan pemampatan yang lebih baik daripada JPEG/PNG yang dikodkan dalam base64.
Sprite imej: Menggabungkan beberapa imej kecil ke dalam satu fail dan menggunakan pemposisian CSS.
CDN (Rangkaian Penghantaran Kandungan): Untuk laman pengeluaran, menyajikan imej yang dioptimumkan dari CDN sering kali lebih cekap.
Pemampatan data: Untuk memindahkan sejumlah besar data binari, algoritma pemampatan khusus seperti gzip atau Brotli lebih cekap daripada base64.

Contoh Kod

Berikut adalah contoh bekerja dengan imej yang dikodkan dalam base64 dalam pelbagai bahasa pengaturcaraan:

1// Menukar imej kepada base64 dalam JavaScript (pelayar)
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  // Dapatkan sebagai URL data (rentetan base64)
11  return canvas.toDataURL('image/png');
12}
13
14// Paparkan imej base64
15function displayBase64Image(base64String) {
16  const img = new Image();
17  
18  // Tangani rentetan tanpa awalan URL data
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# Menukar fail imej kepada 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# Menukar base64 kepada imej dan menyimpan
12def base64_to_image(base64_string, output_path):
13    # Buang awalan URL data jika ada
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# Contoh penggunaan
22base64_str = image_to_base64("input.jpg")
23print(f"data:image/jpeg;base64,{base64_str[:30]}...") # Cetak permulaan rentetan
24
25base64_to_image(base64_str, "output.jpg")
26

1<?php
2// Menukar fail imej kepada base64 dalam 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// Menukar base64 kepada imej dan menyimpan
10function base64ToImage($base64String, $outputPath) {
11    // Ekstrak data binari yang dikodkan dalam base64
12    $imageData = explode(',', $base64String);
13    $imageData = isset($imageData[1]) ? $imageData[1] : $imageData[0];
14    
15    // Dekod dan simpan
16    $data = base64_decode($imageData);
17    file_put_contents($outputPath, $data);
18}
19
20// Contoh penggunaan
21$base64Image = imageToBase64('input.jpg');
22echo substr($base64Image, 0, 50) . "...\n"; // Cetak permulaan rentetan
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    // Menukar fail imej kepada 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    // Menukar base64 kepada imej dan menyimpan
20    public static void base64ToImage(String base64String, String outputPath) throws IOException {
21        // Buang awalan URL data jika ada
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) + "..."); // Cetak permulaan rentetan
36        
37        base64ToImage(base64Image, "output.jpg");
38    }
39}
40

1using System;
2using System.IO;
3using System.Text.RegularExpressions;
4
5class Base64ImageConverter
6{
7    // Menukar fail imej kepada 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    // Menukar base64 kepada imej dan menyimpan
18    public static void Base64ToImage(string base64String, string outputPath)
19    {
20        // Buang awalan URL data jika ada
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) + "..."); // Cetak permulaan rentetan
34        
35        Base64ToImage(base64Image, "output.jpg");
36    }
37}
38

1require 'base64'
2
3# Menukar fail imej kepada 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# Menukar base64 kepada imej dan menyimpan
11def base64_to_image(base64_string, output_path)
12  # Buang awalan URL data jika ada
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# Contoh penggunaan
23base64_image = image_to_base64('input.jpg')
24puts base64_image[0, 50] + '...' # Cetak permulaan rentetan
25
26base64_to_image(base64_image, 'output.jpg')
27

1' Fungsi Excel VBA untuk mengkod fail kepada 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' Penggunaan dalam Excel:
27' =FileToBase64("C:\path\to\image.jpg")
28

Pelaksanaan HTML

Berikut adalah cara untuk menyematkan imej base64 secara langsung dalam HTML:

1<!-- Menyematkan imej base64 secara langsung dalam HTML -->
2<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Imej yang dikodkan dalam base64">
3
4<!-- Menggunakan CSS dengan imej latar 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

Sejarah

Pengekodan base64 mempunyai akar dalam pembangunan sistem emel elektronik pada tahun 1970-an. Ia direka untuk menyelesaikan masalah pemindahan data binari melalui sistem yang direka untuk hanya menangani teks ASCII.

Skema pengekodan ini telah diformalisasikan pada tahun 1987 dengan penerbitan RFC 989, yang mendefinisikan standard Privacy Enhanced Mail (PEM). Ini kemudiannya dikemas kini dalam RFC 1421 dan standard lain yang berkaitan. Istilah "base64" itu sendiri berasal daripada fakta bahawa pengekodan menggunakan 64 watak ASCII yang berbeza untuk mewakili data binari.

Dalam konteks pembangunan web, imej yang dikodkan dalam base64 semakin popular dengan kemunculan URL data, yang pertama kali dicadangkan dalam RFC 2397 pada tahun 1998. Ini membolehkan data binari disertakan secara langsung dalam HTML, CSS, dan dokumen web lain.

Penggunaan imej yang dikodkan dalam base64 dalam pembangunan web menjadi lebih meluas pada pertengahan 2000-an ketika pemaju mencari cara untuk mengurangkan permintaan HTTP dan meningkatkan masa muat halaman. Teknik ini diterima dengan baik semasa kebangkitan pembangunan web mudah alih, di mana meminimumkan permintaan adalah penting untuk prestasi pada sambungan mudah alih yang lebih perlahan.

Hari ini, pengekodan base64 kekal sebagai alat penting dalam pembangunan web, walaupun penggunaannya telah menjadi lebih terarah kerana amalan terbaik telah berkembang. Pendekatan moden cenderung menggunakan pengekodan base64 secara selektif untuk imej kecil yang kritikal sambil memanfaatkan kaedah penghantaran yang lebih cekap seperti HTTP/2 untuk aset yang lebih besar.

Rujukan

💬

Maklum Balas

💬

Klik toast maklum balas untuk mula memberi maklum balas tentang alat ini

🔗

Alat Berkaitan

Temui lebih banyak alat yang mungkin berguna untuk aliran kerja anda