Base64 attēlu dekodētājs un skatītājs | Pārvērst Base64 par attēliem
Dekodējiet un priekšskatiet base64 kodētus attēlu virknes nekavējoties. Atbalsta JPEG, PNG, GIF un citus izplatītākos formātus ar kļūdu apstrādi nederīgiem ievadiem.
Base64 attēla dekoderis un skatītājs
Ievietojiet base64 kodētu attēla virkni un dekodējiet to, lai skatītu attēlu.
Attēla priekšskatījums
Nav attēla, ko rādīt. Ievietojiet base64 virkni, lai to automātiski dekodētu.
Atbalsta JPEG, PNG, GIF un citus izplatītus attēlu formātus.
Norādījumi
1. Ievietojiet base64 kodētu attēla virkni iepriekšējā teksta laukā.
2. Attēls tiks automātiski dekodēts, kamēr jūs rakstāt, vai noklikšķiniet uz pogas 'Dekodēt attēlu'.
3. Dekodētais attēls parādīsies priekšskatījuma zonā zemāk.
Piezīme: Virkne jāuzsāk ar 'data:image/' labākiem rezultātiem, taču rīks mēģinās dekodēt virknes bez šī prefiksa.
Dokumentācija
Base64 attēlu dekodētājs un skatītājs
Ievads
Base64 ir bināro datu uz teksta kodēšanas shēma, kas attēlo bināros datus ASCII virknes formātā. To bieži izmanto, lai iekļautu attēlu datus tieši HTML, CSS, JavaScript, JSON un citos teksta formātos, kuros bināros datus nevar tieši iekļaut. Šis rīks ļauj jums dekodēt base64 kodētās attēlu virknes un tieši skatīt rezultējošos attēlus pārlūkprogrammā.
Base64 kodēšana palielina datu lielumu par aptuveni 33% salīdzinājumā ar oriģinālo bināro, taču tā ļauj attēliem tikt iekļautiem tieši teksta dokumentos, neprasot atsevišķas failu lejupielādes. Tas var būt īpaši noderīgi maziem attēliem, piemēram, ikonām, logotipiem vai vienkāršām grafikām, kur iekļaušanas ērtums pārsniedz lieluma palielinājumu.
Mūsu Base64 attēlu dekodētāja rīks nodrošina vienkāršu saskarni, kurā varat ielīmēt base64 kodētu attēlu virkni un uzreiz redzēt dekodēto attēlu. Tas atbalsta visus izplatītākos attēlu formātus, tostarp JPEG, PNG, GIF, WebP un SVG, un var apstrādāt gan datu URL formātu (ar data:image/...
prefiksu), gan neapstrādātas base64 virknes.
Tehniskie dati
Base64 kodēšanas formāts
Base64 kodēšana pārvērš bināros datus 64 ASCII rakstzīmēs (A-Z, a-z, 0-9, + un /), ar = izmantošanu pildīšanai. Attēliem tīmeklī base64 dati parasti tiek formatēti kā datu URL ar sekojošo struktūru:
1data:[<mediju tips>][;base64],<dati>
2
Piemēram, base64 kodēts PNG attēls var izskatīties šādi:
1data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==
2
Šīs formas komponenti ir:
data:
- URL shēmaimage/png
- Datu MIME tips;base64
- Kodēšanas metode,
- Dalītājs starp galveni un datiem- Faktiskie base64 kodētie dati
Dekodēšanas process
Dekodējot base64 attēlu virkni, notiek šādas darbības:
- Virkne tiek analizēta, lai noteiktu, vai tajā ir datu URL prefikss
- Ja prefikss pastāv, MIME tips tiek izvilkts, lai noteiktu attēla formātu
- Base64 datu daļa tiek izolēta un dekodēta bināros datos
- Binārie dati tiek pārvērsti Blob vai objektu URL, kas var tikt attēlots kā attēls
Ja ievade nesatur datu URL prefiksu, dekodētājs mēģina to uzskatīt par neapstrādātu base64 datu un secina attēla tipu no dekodētā binārā galvenes vai noklusē uz PNG.
Atbalstītie attēlu formāti
Šis rīks atbalsta visus izplatītākos tīmekļa attēlu formātus:
Formāts | MIME tips | Tipiski lietošanas gadījumi |
---|---|---|
JPEG | image/jpeg | Fotogrāfijas, sarežģīti attēli ar daudzām krāsām |
PNG | image/png | Attēli, kuriem nepieciešama caurspīdība, ekrānuzņēmumi, grafikas |
GIF | image/gif | Vienkāršas animācijas, ierobežotu krāsu attēli |
WebP | image/webp | Mūsdienu formāts ar labāku saspiešanu nekā JPEG/PNG |
SVG | image/svg+xml | Vektora grafikas, skalojami ikoni un ilustrācijas |
Lietošanas gadījumi
Base64 kodēti attēliem ir vairāki praktiski pielietojumi tīmekļa izstrādē un citur:
-
Attēlu iekļaušana HTML/CSS/JS: Samazina HTTP pieprasījumus, iekļaujot attēlus tieši jūsu kodā, kas var uzlabot lapas ielādes laikus maziem attēliem.
-
E-pasta veidnes: Nodrošina, ka attēli tiek pareizi attēloti e-pasta klientos, kuri pēc noklusējuma bloķē ārējos attēlus.
-
Vienas faila lietojumprogrammas: Izveido pašpietiekamas HTML lietojumprogrammas, kur visas resursi ir iekļauti vienā failā.
-
API atbildes: Iekļauj attēlu datus tieši JSON atbildēs, neprasot atsevišķas attēlu galapunktus.
-
Datu URI CSS: Iekļauj mazos ikonās un fona attēlus tieši CSS failos.
-
Canvas manipulācijas: Atvieglo attēlu datu saglabāšanu un pārsūtīšanu.
-
Offline lietojumprogrammas: Uzglabā attēlus kā teksta virknes vietējā krātuvē vai IndexedDB.
Veiktspējas apsvērumi
Lai gan base64 kodēšana piedāvā ērtības, tai ir arī trūkumi:
- Palielināts faila lielums: Base64 kodēšana palielina datu lielumu par aptuveni 33%.
- Nav pārlūkprogrammas kešatmiņas: Iekļautie attēli nevar tikt kešoti atsevišķi kā ārējie attēlu faili.
- Analīzes pārslodze: Pārlūkprogrammas pirms attēlošanas ir jādekodē base64 virkne.
- Uzturēšanas izaicinājumi: Iekļautie attēli ir grūtāk atjaunināmi nekā atsauces faili.
Lai nodrošinātu optimālu veiktspēju, base64 kodēšana parasti ieteicama tikai maziem attēliem (zem 10KB). Lielākiem attēliem parasti ir labāk kalpot kā atsevišķiem failiem, kurus var pareizi kešot un optimizēt.
Alternatīvas
Pastāv vairākas alternatīvas base64 kodēšanai dažādiem lietošanas gadījumiem:
-
SVG iekļaušana: Vektora grafikām iekļautais SVG bieži nodrošina labāku veiktspēju un elastību nekā base64 kodēts SVG.
-
WebP un mūsdienu attēlu formāti: Šie nodrošina labāku saspiešanu nekā base64 kodēti JPEG/PNG.
-
Attēlu sprites: Apvienojot vairākus mazos attēlus vienā failā un izmantojot CSS pozicionēšanu.
-
CDN (saturu piegādes tīkli): Ražošanas vietnēm optimizētu attēlu piegāde no CDN bieži ir efektīvāka.
-
Datu saspiešana: Lielu bināro datu pārsūtīšanai specializēti saspiešanas algoritmi, piemēram, gzip vai Brotli, ir efektīvāki nekā base64.
Koda piemēri
Šeit ir piemēri, kā strādāt ar base64 kodētiem attēliem dažādās programmēšanas valodās:
1// Attēla pārvēršana uz base64 JavaScript (pārlūkprogramma)
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 // Iegūt kā datu URL (base64 virkne)
11 return canvas.toDataURL('image/png');
12}
13
14// Rādīt base64 attēlu
15function displayBase64Image(base64String) {
16 const img = new Image();
17
18 // Apstrādāt virknes bez datu URL prefiksa
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# Attēla faila pārvēršana uz 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ārvērst base64 uz attēlu un saglabāt
12def base64_to_image(base64_string, output_path):
13 # Noņemt datu URL prefiksu, ja tas ir klāt
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# Piemēra izmantošana
22base64_str = image_to_base64("input.jpg")
23print(f"data:image/jpeg;base64,{base64_str[:30]}...") # Izdrukāt virknes sākumu
24
25base64_to_image(base64_str, "output.jpg")
26
1<?php
2// Attēla faila pārvēršana uz base64 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ārvērst base64 uz attēlu un saglabāt
10function base64ToImage($base64String, $outputPath) {
11 // Izvilkt base64 kodētos bināros datus
12 $imageData = explode(',', $base64String);
13 $imageData = isset($imageData[1]) ? $imageData[1] : $imageData[0];
14
15 // Dekodēt un saglabāt
16 $data = base64_decode($imageData);
17 file_put_contents($outputPath, $data);
18}
19
20// Piemēra izmantošana
21$base64Image = imageToBase64('input.jpg');
22echo substr($base64Image, 0, 50) . "...\n"; // Izdrukāt virknes sākumu
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 // Attēla faila pārvēršana uz 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ārvērst base64 uz attēlu un saglabāt
20 public static void base64ToImage(String base64String, String outputPath) throws IOException {
21 // Noņemt datu URL prefiksu, ja tas ir klāt
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) + "..."); // Izdrukāt virknes sākumu
36
37 base64ToImage(base64Image, "output.jpg");
38 }
39}
40
1using System;
2using System.IO;
3using System.Text.RegularExpressions;
4
5class Base64ImageConverter
6{
7 // Attēla faila pārvēršana uz 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ārvērst base64 uz attēlu un saglabāt
18 public static void Base64ToImage(string base64String, string outputPath)
19 {
20 // Noņemt datu URL prefiksu, ja tas ir klāt
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) + "..."); // Izdrukāt virknes sākumu
34
35 Base64ToImage(base64Image, "output.jpg");
36 }
37}
38
1require 'base64'
2
3# Attēla faila pārvēršana uz 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ārvērst base64 uz attēlu un saglabāt
11def base64_to_image(base64_string, output_path)
12 # Noņemt datu URL prefiksu, ja tas ir klāt
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# Piemēra izmantošana
23base64_image = image_to_base64('input.jpg')
24puts base64_image[0, 50] + '...' # Izdrukāt virknes sākumu
25
26base64_to_image(base64_image, 'output.jpg')
27
1' Excel VBA funkcija, lai kodētu failu uz 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' Izmantošana Excel:
27' =FileToBase64("C:\path\to\image.jpg")
28
HTML īstenošana
Šeit ir veids, kā tieši iekļaut base64 attēlu HTML:
1<!-- Iekļaujot base64 attēlu tieši HTML -->
2<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Base64 kodēts attēls">
3
4<!-- Izmantojot CSS ar base64 fona attēlu -->
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
Vēsture
Base64 kodēšana ir savas saknes meklējama elektronisko pasta sistēmu izstrādē 1970. gados. Tā tika izstrādāta, lai atrisinātu bināro datu pārsūtīšanas problēmu caur sistēmām, kas tika izstrādātas, lai apstrādātu tikai ASCII tekstu.
Kodēšanas shēma tika formalizēta 1987. gadā ar RFC 989 publikāciju, kas definēja Privātuma uzlaboto pastu (PEM) standartu. Tas vēlāk tika atjaunināts ar RFC 1421 un citiem saistītiem standartiem. Termins "base64" pats par sevi nāk no tā, ka kodēšana izmanto 64 dažādas ASCII rakstzīmes, lai attēlotu bināros datus.
Tīmekļa izstrādes kontekstā base64 kodēšana attēliem ieguva popularitāti ar datu URI parādīšanos, kas pirmo reizi tika ieteikts RFC 2397 1998. gadā. Tas ļāva binārajiem datiem tikt iekļautiem tieši HTML, CSS un citos tīmekļa dokumentos.
Base64 kodēto attēlu izmantošana tīmekļa izstrādē kļuva plaši izplatīta 2000. gadu vidū, kad izstrādātāji meklēja veidus, kā samazināt HTTP pieprasījumus un uzlabot lapas ielādes laikus. Šī tehnika tika īpaši pieņemta mobilās tīmekļa izstrādes laikā, kad pieprasījumu samazināšana bija būtiska veiktspējai lēnākajās mobilajās savienojumos.
Šodien base64 kodēšana joprojām ir svarīgs rīks tīmekļa izstrādē, lai gan tās izmantošana ir kļuvusi mērķtiecīgāka, jo labākās prakses ir attīstījušās. Mūsdienu pieejas parasti izmanto base64 kodēšanu selektīvi maziem, kritiskiem attēliem, vienlaikus izmantojot efektīvākas piegādes metodes, piemēram, HTTP/2 lielākiem aktīviem.
Atsauces
Atsauksmes
Noklikšķiniet uz atsauksmju paziņojuma, lai sāktu sniegt atsauksmes par šo rīku
Saistītie rīki
Atklājiet vairāk rīku, kas varētu būt noderīgi jūsu darba plūsmā