Перетворення зображення на Base64 онлайн або на C#

Кодування зображень онлайн

Про схему 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, що призводить до втрати продуктивності. Якщо вам потрібно перетворити зображення на Base64 і використати закодований рядок для вбудовування в текстовий файл, спершу ознайомтеся з усіма перевагами та недоліками.

Як перетворити зображення на Base64 у C#

Щоб перетворити зображення на рядок Base64, ми використовуємо API Aspose.SVG for .NET, який є потужним і простим у використанні API обробки документів для платформи C#. Ми розглядаємо приклад кодування зображення PNG у Base64 і вбудовування рядка Base64 як URI даних у документ SVG. Ці операції можна виконати за допомогою кількох рядків коду:

    // Open a binary file – raster image
    var bytes = File.ReadAllBytes(@"image.png");
    // 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 PNG image to Base64
    img.Href.BaseVal = "data:image/png;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");

Кроки для перетворення зображення на Base64 у C#

1. Відкрийте зображення для конвертації. Використовуйте метод ReadAllBytes(path), щоб відкрити зображення PNG і зчитати вміст файлу в масив байтів.
2. Ініціалізуйте новий екземпляр класу SVGDocument.
3. Використовуйте метод CreateElementNS(namespaceURI, qualifiedName) класу SVGDocument, щоб створити екземпляр зображення. Простір імен URI namespaceURI встановлює посилання на специфікацію W3C SVG. qualifiedName має містити назву тегa елемента image.
4. Перетворіть зображення на Base64. Викликайте метод ToBase64String(bytes), щоб перетворити масив 8-розрядних цілих чисел на його еквівалентне рядкове представлення, кодоване цифрами з основою 64.
5. Додайте елемент зображення в документ SVG за допомогою методу AppendChild(node).
6. Викличте метод 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 xmlns="http://www.w3.org/2000/svg">
	<image href="data:image/png;charset=utf-8;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAg..." alt="Red circle"/>
</svg>

<body>
    <div>
        <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAg..." alt="Red circle">
    </div>
</body>

.class {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAg...');
}

<?xml version="1.0" encoding="UTF-8"?>
<root>
<image mime = "image/png">iVBORw0KGgoAAAANSUhEUgAAACAAAAAg...</image>
</root>

{
  "image": {
    "mime": "image/png",
    "data": "iVBORw0KGgoAAAANSUhEUgAAACAAAAAg..."
  }
}

FAQ

Початок роботи з Aspose.SVG for .NET API