Кодування зображень онлайн
Кодуйте зображення за допомогою API Aspose.SVG for .NET у реальному часі! Завантажте зображення з локальної файлової системи, і ви негайно отримаєте результат як URI даних, джерело зображення Base64 і фонове джерело CSS Base64. Підтримуються SVG, JPG, JPEG, PJP, PJPEG, PNG, BMP, XBM, GIF, TIFF, ICO, IFIF, WEBP та інші формати зображень.Про схему URI
URI даних – це метод вбудовування зображень та інших файлів у веб-сторінки у вигляді рядка тексту на основі кодування Base64. Схема URI даних дозволяє включати будь-які двійкові дані в документи HTML, CSS, JSON або SVG. Наприклад, ви можете вставляти зображення на веб-сторінку так, ніби їх було завантажено із зовнішнього ресурсу, але замість вказівки URL-адреси файлу ви вставляєте вміст зображення, кодований у форматі Base64. Схема URI даних була визначена в RFC 2397, і станом на 2022 рік вона повністю підтримується більшістю основних браузерів. Основною перевагою використання URI даних є прискорення завантаження сторінки, оскільки браузеру не потрібно робити додатковий веб-запит для отримання файлу, оскільки зображення вже вбудовано в документ HTML.
Синтаксис URI даних такий: data:[<mime type>][;charset=<charset>][;base64],<encoded data>
.
Оскільки розмір даних у кодуванні Base64 збільшується на 33%, рекомендується використовувати URI даних лише для невеликих зображень. Великі зображення Base64 створюють багато коду в HTML, що призводить до втрати продуктивності.
Як перетворити BMP на Base64 у C#
Щоб перетворити BMP на рядок Base64, ми використовуємо API Aspose.SVG for .NET, який є багатофункційним, потужним і простим у використанні API обробки документів для платформи C#. Ми розглядаємо приклад кодування BMP до Base64 і вбудовування рядка Base64 як URI даних у документ SVG. Ці операції можна виконати за допомогою кількох рядків коду:
Код C# для перетворення BMP у рядок Base64 і вбудовування його у файл SVG
// Open a binary file – BMP image
var bytes = File.ReadAllBytes(@"image.bmp");
// Initialize an SVGDocument object
var document = new SVGDocument();
// Create an image element
var img = (SVGImageElement)document.CreateElementNS("http://www.w3.org/2000/svg", "image");
// Convert BMP to Base64
img.Href.BaseVal = "data:image/bmp;charset=utf-8;base64," + Convert.ToBase64String(bytes);
// Add the image element into the SVG document
document.RootElement.AppendChild(img);
// Save the SVG document
document.Save(@"image-base64.svg");
Кроки для перетворення BMP на Base64 у C#
- Відкрийте зображення BMP для конвертації. Використовуйте метод ReadAllBytes(
path
), щоб відкрити зображення BMP і зчитати вміст файлу в масив байтів. - Ініціалізуйте новий екземпляр класу SVGDocument.
- Використовуйте метод
CreateElementNS(namespaceURI, qualifiedName)
класу SVGDocument, щоб створити екземпляр зображення. Простір імен URI
namespaceURI
встановлює посилання на специфікацію W3C SVG.qualifiedName
має містити назву тегa елемента image. - Перетворіть BMP на Base64. Викликайте метод ToBase64String(bytes), щоб перетворити масив 8-розрядних цілих чисел на його еквівалентне рядкове представлення, кодоване цифрами з основою 64.
- Додайте елемент зображення в документ SVG за допомогою методу
AppendChild(
node
). - Викличте метод
Save(
path
), щоб зберегти документ SVG.
Плюси та мінуси URI даних
URI даних дає нам розумний спосіб вставляти зображення на веб-сторінку. Схеми URI можна використовувати різними способами. Але в будь-якому випадку є свої плюси і мінуси.
Переваги:
- Прискорення завантаження сторінки. Браузеру не потрібно робити додатковий веб-запит, щоб отримати файл, оскільки зображення вже вбудовано в документ HTML.
- Поліпшення продуктивності. Браузер потребує менше процесорного часу.
- Веб-сторінки стають незалежними від зовнішніх файлів, завдяки чому ними легко ділитися навіть у режимі офлайн.
Недоліки:
- Розмір кодованих даних Base64 на 1/3 більший за двійкове зображення.
- Кодовані зображення не кешуються браузером і завантажуватимуться кожного разу, коли відвідується така сторінка.
- Кодовані зображення важко редагувати, оскільки спочатку потрібно декодувати рядок Base64.
- Зображення Base64 ніколи не буде проіндексовано Google, оскільки воно не відображається в результатах пошуку зображень.
Онлайн Кодери Base64
Aspose.SVG пропонує безкоштовні онлайн-застосунки для кодування та декодування двійкових даних:
- Base64 Encoders – це набір інструментів, які дозволяють кодувати двійкові дані в різних вихідних форматах: Plain Base64, JSON, XML, URI або CSS.
- Image Base64 Decoder перетворює URI даних, що містить рядок Base64, на зображення, вставляючи рядок URI в елемент керування введенням.
Наші браузерні застосунки працюють на всіх платформах, включаючи Windows, Linux, Mac OS, Android та iOS. Вам не потрібна реєстрація, плагін або встановлення програмного забезпечення. Почніть використовувати наші онлайн-інструменти кодування/декодування Base64 безпечно, надійно та просто!
Приклади використання кодування Base64
Код SVG для вставлення зображення Base64 BMP у документ SVG
<svg xmlns="http://www.w3.org/2000/svg">
<image href="data:image/bmp;charset=utf-8;base64,Qk04DAAAAAAAADYAAAAoAAA..." alt="Blue circle"/>
</svg>
HTML-код для вставлення зображення Base64 BMP
<body>
<div>
<img src="data:image/bmp;base64,Qk04DAAAAAAAADYAAAAoAAA..." alt="Blue circle">
</div>
</body>
Код CSS для вставлення Base64 BMP як фонового зображення
.class {
background-image: url('data:image/bmp;base64,Qk04DAAAAAAAADYAAAAoAAA...');
}
Код XML для вставлення зображення Base64 BMP у документ XML
<?xml version="1.0" encoding="UTF-8"?>
<root>
<image mime = "image/bmp">Qk04DAAAAAAAADYAAAAoAAA...</image>
</root>
Код JSON для вставлення зображення Base64 BMP у документ JSON
{
"image": {
"mime": "image/bmp",
"data": "Qk04DAAAAAAAADYAAAAoAAA..."
}
}
FAQ
Aspose.SVG дозволяє конвертувати BMP у рядок Base64 будь-яким способом – онлайн чи програмно. Наприклад, ви можете кодувати BMP у режимі реального часу за допомогою Онлайн Кодера BMP , який перетворює ваші файли швидко та якісно. Завантажте, кодуйте BMP і отримайте результат за кілька секунд! З іншого боку, ви можете використовувати Aspose.SVG for .NET API, щоб програмно перетворити BMP на Base64.
Історично багато форматів передачі та зберігання даних використовують текст замість двійкового коду (HTML, XML, електронна пошта тощо). Що робити, якщо формат передачі даних є текстовим, але вам потрібно передати двійкові дані? Тут на допомогу приходить кодування Base64. Щоб запобігти неправильній інтерпретації двійкових символів під час надсилання даних через Інтернет, необхідно кодувати їх у символи. Деякі типові застосування кодування Base64: схеми даних URI для зображень (CSS, HTML, JavaScript); перенесення зображень та інших двійкових даних у XML; зберігання зображень у базі даних; включення зображень у повідомлення електронної пошти.
Data URI – це найшвидший і найпростіший спосіб вставляти зображення та інші файли на ваші веб-сторінки. Data URI підтримується основними сучасними браузерами: Chrome, Firefox, Safari, Edge, Opera та IE8+.
Base64 – це схема кодування двійкового коду в текст, яка представляє двійкові дані у рядковому форматі ASCII. Кодування Base64 зазвичай використовується, коли необхідно закодувати двійкову інформацію, яку потрібно зберігати та передавати через носій, призначений для роботи з текстовими даними.
Початок роботи з Aspose.SVG for .NET API
Якщо ви зацікавлені в розробці масштабованої векторної графіки та її застосуванні, встановіть наш гнучкий, високошвидкісний Aspose.SVG for .NET API із потужним набором інтерфейсів для C# та інших мов програмування .NET.Встановіть із командного рядка як
nuget install Aspose.SVG
або через консоль диспетчера пакетів Visual Studio за допомогою Install-Package Aspose.SVG
.
Крім того, отримайте офлайн-інсталятор MSI або бібліотеки DLL у ZIP-файлі з
завантажень.
Aspose.SVG for .NET API – це окрема бібліотека, яка не залежить від будь-яке програмне забезпечення для обробки документів SVG.Щоб отримати докладніші відомості про встановлення бібліотеки C# і системні вимоги, зверніться до документації Aspose.SVG.
Інші підтримувані Кодери Base64
Ви можете конвертувати зображення в рядок Base64. Підтримуються формати JPG, PNG, BMP, GIF, TIFF, ICO та SVG: