Кодируйте изображения онлайн
Кодируйте изображения с помощью 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],<encoded data>
.
Поскольку размер данных в кодировке Base64 увеличивается на 33 %, рекомендуется использовать URI данных только для небольших изображений. Большие изображения Base64 создают много кода в HTML, что приводит к потере преимуществ в производительности. Если вам нужно преобразовать PNG в Base64 и использовать кодированную строку для встраивания в текстовый файл, сначала изучите все плюсы и минусы.
Как преобразовать PNG в Base64 на С#
Чтобы преобразовать строку PNG в строку Base64, мы используем API Aspose.SVG for .NET, который является многофункциональным, мощным и простым в использовании. использовать API для работы с документами для платформы C#. Мы рассматриваем пример кодирования PNG в Base64 и встраивания строки Base64 в качестве URI данных в документ SVG. Эти операции можно выполнить с помощью нескольких строк кода:
Код С# для преобразования строки PNG в строку Base64 и встраивания ее в файл SVG
// 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 PNG 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");
Действия по преобразованию PNG в Base64 на C#
- Откройте изображение PNG для преобразования. Используйте метод ReadAllBytes(
path
), чтобы открыть PNG и прочитать содержимое файла в массив байтов. - Инициализируйте новый экземпляр класса SVGDocument.
- Используйте метод
CreateElementNS(
namespaceURI,qualName
) класса SVGDocument для создания экземпляр изображения.namespaceURI
устанавливает ссылку на спецификацию W3C SVG.qualifiedName
должно содержать имя строкового тега элемента изображения. - Конвертируйте PNG в Base64. Вызовите метод ToBase64String(bytes) для преобразования массива 8-разрядных целых чисел в его эквивалентное строковое представление, кодированное в цифрах base64.
- Добавьте элемент изображения в документ SVG, используя метод
AppendChild(
node
). - Вызовите метод
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 для встраивания изображения Base64 PNG в документ SVG
<svg xmlns="http://www.w3.org/2000/svg">
<image href="data:image/png;charset=utf-8;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAg..." alt="Red circle"/>
</svg>
HTML-код для встраивания изображения Base64 PNG
<body>
<div>
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAg..." alt="Red circle">
</div>
</body>
Код CSS для встраивания изображения Base64 PNG в качестве фонового изображения
.class {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAg...');
}
XML-код для встраивания изображения Base64 PNG в XML-документ
<?xml version="1.0" encoding="UTF-8"?>
<root>
<image mime = "image/png">iVBORw0KGgoAAAANSUhEUgAAACAAAAAg...</image>
</root>
Код JSON для встраивания изображения PNG Base64 в документ JSON
{
"image": {
"mime": "image/png",
"data": "iVBORw0KGgoAAAANSUhEUgAAACAAAAAg..."
}
}
FAQ
Aspose.SVG позволяет кодировать PNG в Base64 любым способом – онлайн или программно. Например, вы можете кодировать PNG в режиме реального времени с помощью онлайн приложения Кодировать PNG , которое быстро и качественно преобразует ваши PNG файлы. Загрузите, конвертируйте PNG и получите результат за несколько секунд! Кроме того, вы можете использовать Aspose.SVG for .NET API для программного преобразования PNG в Base64.
Исторически сложилось так, что многие форматы передачи и хранения данных используют текст вместо двоичного кода (HTML, XML, электронная почта и т. д.). Что делать, если формат передачи данных текстовый, а вам нужно передавать двоичные данные? Здесь на помощь приходит кодировка Base64. Чтобы предотвратить неправильное толкование двоичных символов при отправке данных через Интернет, необходимо кодировать их в Base64 символы. Некоторые типичные применения кодировки Base64: схемы данных URI для изображений (CSS, HTML, JSON); передача изображений и других бинарных данных в XML; хранение изображений в базе данных; включение изображений в сообщения электронной почты.
Data URI – это самый быстрый и простой способ встроить изображения и другие файлы на ваши веб-страницы. Data URI поддерживается основными современными браузерами: Chrome, Firefox, Safari, Edge, Opera и IE8+.
Base64 – это схема преобразования двоичного кода в текст, которая представляет двоичные данные в формате строки ASCII. Кодирование Base64 обычно используется, когда необходимо кодировать двоичную информацию, которую необходимо хранить и передавать по носителям, предназначенным для работы с текстовыми данными.
Начало работы с Aspose.SVG for .NET API
Установите из командной строки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: