Кодування зображення до Base64 онлайн або на C#

Перетворення зображення на рядок, кодований Base64. Підтримуються JPG, JPEG, PJP, PJPEG, PNG, BMP, XBM, GIF, TIFF, ICO, IFIF, WEBP та інші формати зображень.

Download from NuGet
 

Aspose.SVG for .NET Aspose.SVG for .NET

  Download   Pricing Buy

Кодування Base64

Base64 – це група схожих схем кодування для перетворення двійкових даних у текстовий формат ASCII. Base64 зазвичай використовується для передачі даних через Інтернет. Результатом перетворення зображення в Base64 є просто набір латинських букв, цифр і двох символів – «+» і «/». Будь-який браузер знає, що з ними робити. Іншими словами, Base64 – це своєрідне кодування двійкового кодування в текст. Рядок у кодуванні Base64 використовується в різних вихідних форматах: звичайний Base64, JSON, XML, URI даних або CSS.

Base64 особливо поширений в Інтернеті, де його використання включає можливість вставляти файли зображень або інші двійкові ресурси в текстові ресурси, такі як файли HTML і CSS. Включення даних зображення до файлу HTML означає, що браузеру не потрібно робити додатковий веб-запит для отримання файлу, оскільки зображення вже вбудовано в документ HTML. Рекомендується використовувати кодування Base64 лише для невеликих зображень. Великі зображення Base64 призводять до великої кількості коду в HTML, що призводить до втрати продуктивності. Слід також зазначити, що зображення Base64 ніколи не буде проіндексовано Google, оскільки воно не відображається в результатах пошуку зображень.

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

Кодуйте зображення за допомогою API Aspose.SVG for .NET у реальному часі! Завантажте зображення з локальної файлової системи, і ви негайно отримаєте результат як URI даних, джерело зображення Base64 і фонове джерело CSS Base64. Підтримуються SVG, JPG, JPEG, PJP, PJPEG, PNG, BMP, XBM, GIF, TIFF, ICO, IFIF, WEBP та інші формати зображень.

Перетворення зображення на Base64 за допомогою C#

У цій статті розглядається, як кодувати файл зображення в рядок Base64 за допомогою функцій Aspose.SVG .NET API. У наведеному нижче прикладі C# показано, як перетворити зображення PNG на рядок Base64 і вставити його у файл SVG. Метод ReadAllBytes(string) використовується для відкриття зображення (двійкового файлу) і читання вмісту файлу в масив байтів. Метод ToBase64String(bytes) перетворює масив 8-розрядних цілих чисел на його еквівалентне рядкове представлення, кодоване базовими 64 цифрами. Потім метод AppendChild() додає зображення в кодуванні Base64 до документа SVG.

Код C# для перетворення зображення PNG у формат Base64

    // Open a binary file – PNG 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 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");

Фрагмент отриманого файлу image-base64.svg показано нижче. Рядок Base64 було вирізано, щоб не захаращувати приклад коду SVG. Формат для вставлення зображення Base64 як даних URI є таким:

data:[<mime type>][;charset=<charset>][;base64],<кодовані дані>

Код SVG для вставлення зображення Base64

<svg xmlns="http://www.w3.org/2000/svg">
	<image href="data:image/png;charset=utf-8;base64,iVBORw0KGgoAAAANSUhEUg..." alt="Red border"/>
</svg>

Додати зображення Base64 у HTML


Чому потрібно конвертувати зображення в Base64? Зображення в кодуванні Base64 можна вставляти в HTML за допомогою тегу . Просто вставте дані зображення безпосередньо у файл HTML за допомогою URI даних. Кодування Base64 і використання схеми URI даних зменшують кількість HTTP-запитів, необхідних браузеру для відтворення веб-сторінки. Цей фрагмент коду демонструє, як можна вставляти зображення Base64 у HTML.

HTML-код для вставлення зображення Base64 як URI даних

<body>
    <div>
        <img src="data:image/jpeg;base64,iVBORw0KGgoAAAANSUhEUg..." alt="Red border">
    </div>
</body>

URI даних складається з двох частин, розділених комою. Перша частина вказує зображення в кодуванні Base64, а друга частина вказує рядок зображення в кодуванні Base64:

  1. data:image/jpeg;base64 – це заголовок схеми URI даних.
  2. iVBORw0KGgoAAAANSUhEUg... – це кодовані дані Base64.

Вбудувати зображення Base64 в CSS код


Ще один спосіб зменшити кількість HTTP-запитів для зображень – це використання властивості CSS background-image. Властивість background-image визначає зображення як елемент фону. Кожне зображення для властивості background-image можна вказати як URL-адресу або як URI даних зображення. Різниця полягає в тому, що в першому випадку браузер надсилає HTTP-запит, щоб отримати зовнішнє зображення, тоді як у другому випадку зображення Base64 безпосередньо вбудовано в документ і не вказує на інші джерела. Таким чином, браузеру не потрібно завантажувати HTTP-запити, щоб доставити вивід.

Код CSS для вставлення зображення Base64 як URI даних

body {
    background-image: url('data:image/jpeg;base64,iVBORw0KGgoAAAANSUhEUg...');
}

Онлайн Кодери Base64

Онлайн Кодери Base64 перетворюють вміст документів SVG або файлів зображень на еквівалент представлення рядка, який кодований Base64 символами. Вони також надають приклади для даних URI, JSON, XML та інших. Інструменти кодування допомагають уникнути різноманітних проблем із кодуванням даних, які роблять вміст веб-сайту чи повідомлення електронної пошти нечитабельними. Кодери Base64 безпечні, прості у використанні та абсолютно безкоштовні. Вони працюють у будь-якому браузері та на будь-якій операційній системі. Перетворіть зображення на Base64 безкоштовно прямо зараз!

Встановлення бібліотеки Aspose.SVG for .NET

Aspose.SVG for .NET – це гнучка міжплатформна бібліотека, яка розроблена для надання широкого спектру функцій для обробки та відтворення документів SVG. Вона легко інтегрується у ваші програми .NET для роботи з файлами SVG без встановлення стороннього програмного забезпечення. Наш API SVG .NET можна використовувати з будь-якою мовою .NET, як-от C#, VB.NET, ASP.NET тощо. Він однаково добре працює на будь-якій ОС, яка може інсталювати Mono (підтримка .NET 4.0 Framework) або використовувати .NET ядро. Це включає Windows, Linux і macOS.

Встановлення Aspose.SVG for .NET через NuGet :

  1. Використання консолі диспетчера пакетів.
  2. Використання графічного інтерфейсу користувача NuGet Package Manager.

Додаткову інформацію про встановлення бібліотеки C# ви знайдете у документації Aspose.SVG.

Інші підтримувані Кодери

Ви можете кодувати зображення в Base64 – підтримуються формати JPG, PNG, BMP, GIF, TIFF, ICO та SVG: