🛠️

Whiz Tools

Build • Create • Innovate

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ēma
  • image/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:

  1. Virkne tiek analizēta, lai noteiktu, vai tajā ir datu URL prefikss
  2. Ja prefikss pastāv, MIME tips tiek izvilkts, lai noteiktu attēla formātu
  3. Base64 datu daļa tiek izolēta un dekodēta bināros datos
  4. 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ātsMIME tipsTipiski lietošanas gadījumi
JPEGimage/jpegFotogrāfijas, sarežģīti attēli ar daudzām krāsām
PNGimage/pngAttēli, kuriem nepieciešama caurspīdība, ekrānuzņēmumi, grafikas
GIFimage/gifVienkāršas animācijas, ierobežotu krāsu attēli
WebPimage/webpMūsdienu formāts ar labāku saspiešanu nekā JPEG/PNG
SVGimage/svg+xmlVektora 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:

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

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

  3. Vienas faila lietojumprogrammas: Izveido pašpietiekamas HTML lietojumprogrammas, kur visas resursi ir iekļauti vienā failā.

  4. API atbildes: Iekļauj attēlu datus tieši JSON atbildēs, neprasot atsevišķas attēlu galapunktus.

  5. Datu URI CSS: Iekļauj mazos ikonās un fona attēlus tieši CSS failos.

  6. Canvas manipulācijas: Atvieglo attēlu datu saglabāšanu un pārsūtīšanu.

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

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

  2. WebP un mūsdienu attēlu formāti: Šie nodrošina labāku saspiešanu nekā base64 kodēti JPEG/PNG.

  3. Attēlu sprites: Apvienojot vairākus mazos attēlus vienā failā un izmantojot CSS pozicionēšanu.

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

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

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

  1. RFC 4648: Base16, Base32 un Base64 datu kodējumi
  2. RFC 2397: "data" URL shēma
  3. MDN Web Docs: datu URI
  4. CSS-Tricks: Datu URI
  5. Base64 attēlu kodētājs
  6. Vai es varu izmantot: Datu URI
  7. Tīmekļa veiktspēja: Kad base64 kodēt attēlus (un kad ne)