Создание строковых представлений изображений, которые можно встраивать в HTML или CSS.
JIMP - это программа обработки изображений JavaScript, которая на самом деле является пакетом NPM, и одной из многих ее функций является возможность создавать строку Base 64 из файла изображения. Это имеет различные применения (некоторые гнусные…), и в этом посте я продемонстрирую встраивание графики в кодировке Base 64 как img src в HTML-документ. Это полезно для небольших изображений, таких как логотипы или изображения кнопок, чтобы уменьшить количество HTTP-запросов, и хотя я использую HTML, строку Base 64 также можно использовать в CSS.
Как вы, вероятно, знаете, основание 10 (десятичное) использует цифры 0–9, а основание 16 (шестнадцатеричное) использует цифры 0–9 плюс буквы A-F. Base 64, конечно, требует 64 различных символа и использует 26 букв верхнего регистра, 26 букв нижнего регистра, цифры 0–9, а также символы плюса и косой черты, а также знак равенства для заполнения. (Есть также несколько других менее распространенных стандартов.) Поэтому любой код, преобразующий файл, поток или буфер в Base 64, предоставит строку, содержащую только символы ASCII, которые можно безопасно передавать с использованием любого протокола.
Для этого проекта я напишу пару простых функций, которые открывают файл изображения, получают его кодировку Base 64 и затем вставляют его в документ HTML. Вы можете получить исходный код из репозитория Github.
Полная документация для JIMP находится на https://www.npmjs.com/package/jimp, и вы можете установить ее с помощью:
npm install --save jimp
Это исходный код для создания изображения base 64 и встраивания его в файл HTML.
В функции openLogo мы читаем файл изображения (он включен в исходный код), а затем вызываем getBase64Async с типом MIME Jimp.AUTO, чтобы сохранить тип файла исходного изображения. Результирующая строка Base 64 затем передается в base64ToPage.
Функция base64ToPage открывает существующий файл HTML, заменяет {{logo}} строкой Base 64 и затем сохраняет файл. Это очень грубое приближение того, что выполняют движки шаблонов, такие как Mustache и Handlebars, и это просто быстрый, но грязный способ переноса изображения Base 64 на веб-страницу, а не код производственного качества.
В реальной ситуации, самый простой способ использовать сгенерированное JIMP изображение base 64, вероятно, - записать его в текстовый файл, а затем скопировать / вставить в свой код. Создание образа base 64 занимает довольно много времени даже для очень маленькой графики, поэтому это не то, что можно сделать на лету для каждого HTTP-запроса - это строго разовый процесс для каждого изображения.
Теперь давайте запустим код.
node base64image.js
Если вы откроете base64image.htm в своем браузере, вы увидите страницу, содержащую этот логотип.
