Декодер и преглед на изображения в Base64 | Преобразувайте Base64 в изображения

Декодирайте и преглеждайте низове с изображения, кодирани в base64, незабавно. Поддържа JPEG, PNG, GIF и други общи формати с обработка на грешки за невалидни входове.

Декодер и преглед на изображение в Base64

Поставете низ с изображение, кодирано в base64, и го декодирайте, за да видите изображението.

Преглед на изображението

Няма изображение за показване. Поставете низ в base64, за да го видите автоматично декодиран.

Поддържа JPEG, PNG, GIF и други общи формати на изображения.

Инструкции

1. Поставете низ с изображение, кодирано в base64, в текстовото поле по-горе.

2. Изображението ще бъде декодирано автоматично, докато пишете, или щракнете върху бутона 'Декодирай изображението'.

3. Декодираното изображение ще се появи в областта за преглед по-долу.

Забележка: Низът трябва да започва с 'data:image/' за най-добри резултати, но инструментът ще се опита да декодира низове без този префикс също.

📚

Документация

Декодер и преглед на изображения в Base64

Въведение

Base64 е схема за кодиране на двоични данни в текстов формат, която представя двоични данни в ASCII стринг формат. Често се използва за вграждане на данни за изображения директно в HTML, CSS, JavaScript, JSON и други текстови формати, където двоичните данни не могат да бъдат включени директно. Този инструмент ви позволява да декодирате низове с изображения, кодирани в base64, и да видите получените изображения директно в браузъра си.

Кодирането в Base64 увеличава размера на данните с приблизително 33% в сравнение с оригиналния двоичен формат, но позволява изображенията да бъдат включени директно в текстови документи, без да е необходимо отделно изтегляне на файлове. Това може да бъде особено полезно за малки изображения, като икони, лога или прости графики, където удобството от вграждането надвишава увеличението на размера.

Нашият инструмент за декодиране на изображения в Base64 предлага прост интерфейс, където можете да поставите низ с изображение, кодирано в base64, и веднага да видите декодираната картинка. Той поддържа всички общи формати на изображения, включително JPEG, PNG, GIF, WebP и SVG, и може да обработва както формата на данни URL (с префикс data:image/...), така и сурови base64 низове.

Технически детайли

Формат на кодирането в Base64

Кодирането в Base64 преобразува двоични данни в набор от 64 ASCII символа (A-Z, a-z, 0-9, + и /), като = се използва за запълване. За изображения в мрежата, данните в base64 обикновено са форматирани като данни URL с следната структура:

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

Например, базираната на base64 PNG изображение може да изглежда така:

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

Компонентите на този формат са:

data: - URL схемата
image/png - MIME типа на данните
;base64 - Методът на кодиране
, - Разделител между заглавието и данните
Самите данни, кодирани в base64

Процес на декодиране

При декодиране на низ с изображение в base64, следват следните стъпки:

Низът се анализира, за да се определи дали съдържа префикс на данни URL
Ако съществува префикс, MIME типът се извлича, за да се определи форматът на изображението
Частта с данните от base64 се изолира и декодира в двоични данни
Двоичните данни се преобразуват в Blob или обектен URL, който може да се покаже като изображение

Ако входът не включва префикс на данни URL, декодерът се опитва да го третира като сурови данни в base64 и извежда типа на изображението от декодирания двоичен заглавен файл или по подразбиране към PNG.

Поддържани формати на изображения

Този инструмент поддържа всички общи формати на изображения в мрежата:

Формат	MIME тип	Типични случаи на употреба
JPEG	image/jpeg	Снимки, сложни изображения с много цветове
PNG	image/png	Изображения, изискващи прозрачност, екранни снимки, графики
GIF	image/gif	Прости анимации, изображения с ограничени цветове
WebP	image/webp	Модерен формат с по-добро компресиране от JPEG/PNG
SVG	image/svg+xml	Векторни графики, мащабируеми икони и илюстрации

Случаи на употреба

Изображенията, кодирани в base64, имат няколко практични приложения в уеб разработката и извън нея:

Вграждане на изображения в HTML/CSS/JS: Намалява HTTP заявките, като включва изображения директно в кода, което може да подобри времето за зареждане на страницата за малки изображения.
Шаблони за имейли: Осигурява правилно показване на изображения в имейл клиенти, които по подразбиране блокират външни изображения.
Приложения с един файл: Създава самостоятелни HTML приложения, където всички ресурси са вградени в един файл.
Отговори на API: Включва данни за изображения директно в JSON отговори, без да е необходимо отделни крайни точки за изображения.
Data URIs в CSS: Вгражда малки икони и фонови изображения директно в CSS файлове.
Манипулации с Canvas: Улеснява запазването и прехвърлянето на данни за изображения от canvas.
Офлайн приложения: Съхранява изображения като текстови низове в localStorage или IndexedDB.

Производителност

Въпреки че кодирането в base64 предлага удобство, то идва с компромиси:

Увеличен размер на файла: Кодирането в base64 увеличава размера на данните с приблизително 33%.
Няма кеширане от браузъра: Вградените изображения не могат да бъдат кеширани отделно, както външните файлове с изображения.
Разходи за парсинг: Браузерите трябва да декодират base64 низовете преди рендирането.
Предизвикателства при поддръжката: Вградените изображения са по-трудни за актуализиране от референтните файлове.

За оптимална производителност, кодирането в base64 обикновено се препоръчва само за малки изображения (под 10KB). По-големите изображения обикновено е по-добре да се предоставят като отделни файлове, които могат да бъдат правилно кеширани и оптимизирани.

Алтернативи

Съществуват няколко алтернативи на кодирането в base64 за различни случаи на употреба:

Вграждане на SVG: За векторни графики, вграденото SVG често предлага по-добра производителност и гъвкавост от кодирането в base64.
WebP и модерни формати на изображения: Те предлагат по-добро компресиране от кодираните в base64 JPEG/PNG.
Спрайтове на изображения: Комбиниране на множество малки изображения в един файл и използване на CSS позициониране.
CDN (Content Delivery Networks): За производствени сайтове, предоставянето на оптимизирани изображения от CDN обикновено е по-ефективно.
Компресия на данни: За прехвърляне на големи количества двоични данни, специализирани алгоритми за компресия като gzip или Brotli са по-ефективни от base64.

Примери за код

Ето примери за работа с изображения, кодирани в base64, на различни програмни езици:

1// Преобразуване на изображение в base64 в JavaScript (браузър)
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  // Получаване като данни URL (base64 низ)
11  return canvas.toDataURL('image/png');
12}
13
14// Показване на base64 изображение
15function displayBase64Image(base64String) {
16  const img = new Image();
17  
18  // Обработка на низове без префикс на данни URL
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# Преобразуване на изображение в файл в 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# Преобразуване на base64 в изображение и запазване
12def base64_to_image(base64_string, output_path):
13    # Премахване на префикса на данни URL, ако е наличен
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# Пример за употреба
22base64_str = image_to_base64("input.jpg")
23print(f"data:image/jpeg;base64,{base64_str[:30]}...") # Печат на началото на низа
24
25base64_to_image(base64_str, "output.jpg")
26

1<?php
2// Преобразуване на изображение в файл в 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// Преобразуване на base64 в изображение и запазване
10function base64ToImage($base64String, $outputPath) {
11    // Извличане на двоичните данни, кодирани в base64
12    $imageData = explode(',', $base64String);
13    $imageData = isset($imageData[1]) ? $imageData[1] : $imageData[0];
14    
15    // Декодиране и запазване
16    $data = base64_decode($imageData);
17    file_put_contents($outputPath, $data);
18}
19
20// Пример за употреба
21$base64Image = imageToBase64('input.jpg');
22echo substr($base64Image, 0, 50) . "...\n"; // Печат на началото на низа
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    // Преобразуване на изображение в файл в 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    // Преобразуване на base64 в изображение и запазване
20    public static void base64ToImage(String base64String, String outputPath) throws IOException {
21        // Премахване на префикса на данни URL, ако е наличен
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) + "..."); // Печат на началото на низа
36        
37        base64ToImage(base64Image, "output.jpg");
38    }
39}
40

1using System;
2using System.IO;
3using System.Text.RegularExpressions;
4
5class Base64ImageConverter
6{
7    // Преобразуване на изображение в файл в 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    // Преобразуване на base64 в изображение и запазване
18    public static void Base64ToImage(string base64String, string outputPath)
19    {
20        // Премахване на префикса на данни URL, ако е наличен
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) + "..."); // Печат на началото на низа
34        
35        Base64ToImage(base64Image, "output.jpg");
36    }
37}
38

1require 'base64'
2
3# Преобразуване на изображение в файл в 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# Преобразуване на base64 в изображение и запазване
11def base64_to_image(base64_string, output_path)
12  # Премахване на префикса на данни URL, ако е наличен
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# Пример за употреба
23base64_image = image_to_base64('input.jpg')
24puts base64_image[0, 50] + '...' # Печат на началото на низа
25
26base64_to_image(base64_image, 'output.jpg')
27

1' Excel VBA функция за кодиране на файл в 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' Използване в Excel:
27' =FileToBase64("C:\path\to\image.jpg")
28

HTML Имплементация

Ето как да вградите изображение в base64 директно в HTML:

1<!-- Вграждане на изображение в base64 директно в HTML -->
2<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Изображение, кодирано в Base64">
3
4<!-- Използване на CSS с фоново изображение в 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

История

Кодирането в base64 има корени в развитието на електронните пощенски системи през 70-те години. То е проектирано да реши проблема с предаването на двоични данни през системи, които са проектирани да обработват само ASCII текст.

Схемата за кодиране е формализирана през 1987 г. с публикуването на RFC 989, което определя стандарта за поверителна поща (PEM). Той по-късно е актуализиран в RFC 1421 и други свързани стандарти. Терминът "base64" произлиза от факта, че кодиране използва 64 различни ASCII символа за представяне на двоични данни.

В контекста на уеб разработката, кодирането на изображения в base64 стана популярно с появата на данни URL, които бяха предложени за първи път в RFC 2397 през 1998 г. Това позволи двоични данни да бъдат включени директно в HTML, CSS и други уеб документи.

Използването на изображения, кодирани в base64, в уеб разработката стана по-широко разпространено в средата на 2000-те години, тъй като разработчиците търсеха начини за намаляване на HTTP заявките и подобряване на времето за зареждане на страниците. Техниката беше особено приета по време на възхода на мобилната уеб разработка, където минимизирането на заявките беше от решаващо значение за производителността на по-бавни мобилни връзки.

Днес кодирането в base64 остава важен инструмент в уеб разработката, въпреки че употребата му стана по-целенасочена, тъй като добрите практики са се развили. Съвременните подходи обикновено използват кодирането в base64 селективно за малки, критични изображения, докато разчитат на по-ефективни методи за доставка, като HTTP/2 за по-големи активи.

Референции

💬

Обратна връзка

💬

Щракнете върху тост за обратна връзка, за да започнете да давате обратна връзка за този инструмент

🔗

Свързани инструменти

Открийте още инструменти, които могат да бъдат полезни за вашия работен процес

Инструмент за минимизиране на CSS: Оптимизирайте и компресирайте CSS кода онлайн

Опитайте този инструмент

Конвертор на числови системи: Двоичен, Десетичен, Шестнадесетичен и Потребителски бази

Опитайте този инструмент

Генератор на ЕГН за тестови цели и валидация на данни

Опитайте този инструмент

Минификатор на JavaScript: Намалете размера на кода без загуба на функционалност

Опитайте този инструмент

Декодер и преглед на изображения в Base64 | Преобразувайте Base64 в изображения

Декодер и преглед на изображение в Base64

Преглед на изображението

Инструкции

Документация

Декодер и преглед на изображения в Base64

Въведение

Технически детайли

Формат на кодирането в Base64

Процес на декодиране

Поддържани формати на изображения

Случаи на употреба

Производителност

Алтернативи

Примери за код

HTML Имплементация

История

Референции

Обратна връзка

Свързани инструменти

Base64 кодер и декодер: Преобразувайте текст от/в Base64

Конвертор между двоичен и десетичен: Преобразувайте между числови системи

Инструмент за генериране и валидиране на IBAN за тестване и проверка

Инструмент за минимизиране на CSS: Оптимизирайте и компресирайте CSS кода онлайн

Конвертор на числови системи: Двоичен, Десетичен, Шестнадесетичен и Потребителски бази

Генератор на ЕГН за тестови цели и валидация на данни

Минификатор на JavaScript: Намалете размера на кода без загуба на функционалност