Кодируйте изображения онлайн

Кодируйте изображения с помощью Aspose.SVG for .NET API в режиме реального времени! Загрузите изображение из локальной файловой системы, и вы немедленно получите результат в виде data URI, Base64 Image для встраивания в HTML и CSS Background. Поддерживаются 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],<кодированные данные>.

Поскольку размер данных в кодировке Base64 увеличивается на 33 %, рекомендуется использовать URI данных только для небольших изображений. Большие изображения Base64 создают много кода в HTML, что приводит к потере преимуществ в производительности. Изображение ICO содержит иконку, обычно используемую для представления программы, файла или папки Windows. Файлы ICO Windows обычно хранят изображения размером от 16x16 до 256x256 пикселей. Если вам нужно преобразовать ICO в Base64 и использовать кодированную строку для встраивания изображения ICO в текстовый файл, ознакомьтесь сначала со всеми плюсами и минусами.


Как преобразовать ICO в Base64 на C#

Чтобы преобразовать ICO в строку Base64, мы используем API Aspose.SVG для .NET, который является многофункциональным, мощным и простым в работе с документами для платформы C#. Мы рассматриваем пример кодирования ICO в Base64 и встраивания строки Base64 в качестве URI данных в документ SVG. Эти операции можно выполнить с помощью нескольких строк кода:


Код C# для преобразования ICO в строку Base64 и встраивания ее в файл SVG

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



Шаги по преобразованию ICO в Base64 на C#

  1. Откройте образ ICO для преобразования. Используйте метод ReadAllBytes(path), чтобы открыть изображение ICO и прочитать содержимое файла в массив байтов.
  2. Инициализируйте новый экземпляр класса SVGDocument.
  3. Используйте метод CreateElementNS(namespaceURI,qualName) класса SVGDocument для создания экземпляр изображения. namespaceURI устанавливает ссылку на спецификацию W3C SVG. qualifiedName должно содержать имя строкового тега элемента изображения.
  4. Преобразование ICO в Base64. Вызовите метод ToBase64String(bytes) для преобразования массива 8-разрядных целых чисел в его эквивалентное строковое представление, кодированное в цифрах base64.
  5. Добавьте элемент изображения в документ SVG, используя метод AppendChild(node) .
  6. Вызовите метод Save(path), чтобы сохранить документ SVG.

Плюсы и минусы использования Data URI

URI данных дает нам разумный способ вставлять изображения на веб-страницу. Схемы URI можно использовать разными способами. Но в любом случае есть плюсы и минусы.

Плюсы:

  • Ускорение загрузки страниц. Браузеру не нужно делать дополнительный веб-запрос для извлечения файла, поскольку изображение уже встроено в HTML-документ.
  • Улучшение производительности. Браузер требует меньше процессорного времени.
  • Веб-страницы становятся независимыми от внешних файлов, что упрощает их совместное использование даже в автономном режиме.

Минусы:

  • Размер данных, кодированных в Base64, на 1/3 больше, чем у двоичного изображения.
  • Кодированные изображения не кэшируются браузером и будут загружаться при каждом посещении такой страницы.
  • Кодированные изображения трудно редактировать, поскольку сначала необходимо декодировать строку Base64.
  • Изображение Base64 никогда не будет проиндексировано Google, поскольку оно не отображается в результатах поиска изображений.

Онлайн-кодировщики Base64

Aspose.SVG предлагает бесплатные онлайн-приложения для кодирования и декодирования двоичных данных:

  • Кодировщик Base64 представляют собой набор инструментов, позволяющих кодировать двоичные данные в различных выходных форматах: Plain Base64, JSON, XML, URI или CSS.
  • Base64 Конвертер Изображений преобразует URI данных, содержащий строку Base64, в изображение путем вставки строки URI в элемент управления вводом.

Наши браузерные приложения работают на всех платформах, включая Windows, Linux, Mac OS, Android и iOS. Для вас не требуется регистрация или установка программного обеспечения. Начните использовать наши онлайн-инструменты кодирования/декодирования Base64 безопасно, надежно и просто!

Примеры использования кодировки Base64

Код SVG для встраивания изображения ICO Base64 в документ SVG

<svg xmlns="http://www.w3.org/2000/svg">
	<image href="data:image/x-icon;charset=utf-8;base64,Qk04DAAAAAAAADYAAAAoAAAAIAAAACAAAAABABgAAAAAAAIMAAASCwAAEgs..." alt="Blue circle"/>
</svg>

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

<body>
    <div>
        <img src="data:image/x-icon;base64,Qk04DAAAAAAAADYAAAAoAAAAIAAAACAAAAABABgAAAAAAAIMAAASCwAAEgs..." alt="Blue circle">
    </div>
</body>

Код CSS для встраивания изображения ICO Base64 в качестве фонового изображения

.class {
    background-image: url('data:image/x-icon;base64,Qk04DAAAAAAAADYAAAAoAAAAIAAAACAAAAABABgAAAAAAAIMAAASCwAAEgs...');
}

Код XML для встраивания изображения ICO Base64 в XML-документ

<?xml version="1.0" encoding="UTF-8"?>
<root>
<image mime = "image/x-icon">Qk04DAAAAAAAADYAAAAoAAAAIAAAACAAAAABABgAAAAAAAIMAAASCwAAEgs...</image>
</root>

Код JSON для встраивания изображения ICO Base64 в документ JSON

{
  "image": {
    "mime": "image/x-icon",
    "data": "Qk04DAAAAAAAADYAAAAoAAAAIAAAACAAAAABABgAAAAAAAIMAAASCwAAEgs..."
  }
}



FAQ

1. Как кодировать ICO в Base64?

Aspose.SVG позволяет кодировать ICO в Base64 любым способом - онлайн или программно. Например, вы можете кодировать ICO в режиме реального времени с помощью онлайн приложения Кодировать ICO , который быстро и качественно преобразует ваши ICO файлы. Загрузите, конвертируйте ICO и получите результат за несколько секунд! Кроме того, вы можете использовать Aspose.SVG для .NET API для программного преобразования ICO в Base64.

2. Зачем нужно кодирование Base64?

Исторически сложилось так, что многие форматы передачи и хранения данных используют текст вместо двоичного кода (HTML, XML, электронная почта и т. д.). Что делать, если формат передачи данных текстовый, а вам нужно передавать двоичные данные? Здесь на помощь приходит кодировка Base64. Чтобы предотвратить неправильное толкование двоичных символов при отправке данных через Интернет, необходимо кодировать их в Base64 символы. Некоторые типичные применения кодировки Base64: схемы данных URI для изображений (CSS, HTML, JSON); передача изображений и других бинарных данных в XML; хранение изображений в базе данных; включение изображений в сообщения электронной почты.

3. Какие браузеры поддерживают Data URI?

Data URI – это самый быстрый и простой способ встроить изображения и другие файлы на ваши веб-страницы. Data URI поддерживается основными современными браузерами: Chrome, Firefox, Safari, Edge, Opera и IE8+.

4. Что такое кодировка Base64?

Base64 – это схема преобразования двоичного кода в текст, которая представляет двоичные данные в формате строки ASCII. Кодирование Base64 обычно используется, когда необходимо кодировать двоичную информацию, которую необходимо хранить и передавать по носителям, предназначенным для работы с текстовыми данными.

Начало работы с .NET SVG API

Установите из командной строки nuget install Aspose.SVG или через консоль диспетчера пакетов Visual Studio с помощью Install-Package Aspose.SVG. В качестве альтернативы можно получить автономный установщик MSI или DLL-файлы в ZIP-файле из загрузки. Aspose.SVG для .NET API является автономной библиотекой и не зависит от какого-либо программного обеспечения для обработки документов SVG. Дополнительные сведения об установке библиотеки C# и системных требованиях вы найдете в документации Aspose.SVG.

Другие поддерживаемые кодировщики Base64

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

JPG to Base64 (JPEG Image)
PNG to Base64 (Portable Network Graphics)
BMP to Base64 (Bitmap Image)
SVG to Base64 (Scalable Vector Graphics)
TIFF to Base64 (Tagged Image Format)
GIF TO Base64 (Graphical Interchange Format)
ICO to Base64 (Computer Icons Format)
Image to Base64 (Binary Image)