Сайтостроение
Внедрение картинки (данных) непосредственно в HTML-код
В HTML существует возможность хранить картинки или другие данные в текстовом виде непосредственно в файле HTML.
Это может пригодиться, если вы хотите, например, в подпись своих писем вставить небольшую картинку и не хотите, чтобы она была вложена в письмо или загружалась из сети. Вставленная таким образом картинка всегда доступна.
Данные должны быть предварительно закодированы в Base64. Закодировать картинку в Base64 можно при помощи онлайн сервисов, например http://www.motobit.com/util/base64-decoder-encoder.asp или используя Total Commander.
Для вставки используем конструкцию вида:
Формат картинки может быть любым, конечно поддерживаемым тегом , только не забываем менять тип.
Для того, чтобы закодировать картинку, используя Total Commander, идем в меню Files => Encode Files (Файлы => Кодировать), выбираем MIME (Base64), указываем куда сохранить.
Открываем полученный файл с помощью текстового редактора и копируем все после служебной информации.
Допустим мы хотим вставить такую картинку u.png ()
Кодируем используя Total Commander, в результате получаем файл u.b64:
MIME-Version: 1.0 Content-Type: application/octet-stream; name="u.png" Content-Transfer-Encoding: base64 Content-Disposition: attachment; filename="u.png"
iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAACXBIWXMAAAsTAAALEwEAmpwYAAAD UUlEQVR42lWTWUwTURSGaUtIKY5QweISTUzceDGu0Rj1xURjTNQEE+ODGn0hPhBEQdqZztahBbrA tFih1Fprh9IBiVLLErZSU7BUoS7VqNH44ovx0S0ovdfO4Ez04cw9Ofec7/5zzr15NEnkUxSVFx8O bZ1x7nzHN6z9nOhnzOFwWCnECcKoEFbBRrrp6iF/XRvD0BoplkdTuAiIhtt3P3Fu+jJlKlkM1WoX LFjVeSnpXrC94gV3ciJp1X0L1K7+NtDfvXdpj1TmmUwm8QTfLa867T+ceWTSwO5r5b87XNaDEoBr v3p2Ai+AU1Qh5OiDGS4UXi4roAisQHBiYfJS2obAVPMyELYcGxViOIaKcLaNLXzadej5nBUBPXW6 hdYW0z4RQOYUXK2tUfr8QeXL0Kn4JKEBk7QWdtrrLggJJEmoCBxVCf50qIaaa0HABFkEPZaLNnGf wPNFGV0u05Y554bvMQoBPLbxs9t9QydJpHP/KayRbsf+pG1NdgTTgDuGXa8dbS41ZtArxaQYT1Wl HVqYaloGOcvJIan4X2MdViTl3vExbS+GPfXlvzzutj1LPch9HrYea59t0YIRtAAO+PQuIWYwNKik Yty41Iuk/3TvMzsCB9HcQR7msgzgjZs7Z5rLQPR6PojeJW2d3oDCoG/IlwAYqlexbp/i9eB19ziu BoMoAlrR03YZ0G8+0JFhS8EjuhD6zWfuCTEjppcBOKYX1bwaqA5MM2oYZ4pBy7XjrAyY7sPqU01F cNZW/jtwZeXXVpt5u1RM4JhYzHFBddqz5/28fUU2NwngtVUbZUCE79o6x67/MYiXLiSbS8D9xp1v I7znkLvDK07A5/MiT7mzdxMMAsdMqxaiWDHkgzePigBUXy9KTfdWeVKNSjjPrvv5uKkYxszlIHX7 eDLeVfkgbt30bt5eAlOOtT9nLRrI03szrOumOtcb4SrTSj2KKfr4nuUZ7kR8HFPAYXLlYqxRl43T GjjTWAhHCC1MNK/+lWA0cJLRgfsh95G/N1H136z7+BCSuHMuMEGVLo4a1XCKKcuO0WXZBw1FcNig hmPWbe8jIeeJpdFiCrkHguWUyM92NBKseBut8T92bfsw66z49IyrHH2T5CvlqeCYUvL/ANIZ7+oh XSdWAAAAAElFTkSuQmCC
Картинка готова. Цветом выделены необходимые нам данные. Осталось только вставить подготовленную картинку в нужное место html-страницы (подписи письма в формате html). Используем тег :
P.S.
Работает: Opera 10, Firefox 3, IE 8, Thunderbird 2, Thunderbird 3.
Не работает: IE 6.
Если вашего браузера (почтового клиента) нет в списке, отпишитесь пожалуйста на форуме о работоспособности метода, конечно с указанием наименования и версии. О работоспособности в браузере можно судить по результату.
Data URL
Data URL, URL имеющий приставку data: , делает возможным встраивание файлов небольшого размера прямо в документ.
Примечание: современные браузеры обрабатывают Data URL, как неявный уникальный origin, и не заимствуют значение origin из объекта настроек ответственного за навигацию.
Синтаксис
Data URL состоит из четырёх сегментов: приставки ( data: ), MIME типа, описывающего тип данных, дополнительного ключевого слова base64 для нетекстовых данных и самой строки данных:
data:[][;base64],
тип данных описывается строкой в формате MIME типа, например ‘image/jpeg’ для JPEG файла изображения. При не указывании типа данных, браузер автоматически будет интерпретировать строку данных, как text/plain;charset=US-ASCII
Если данные представляют собой какую-либо текстовую информацию, вы можете просто вставить эту текстовую строку в Data URL (используя соответствующие для типа данных сущности и знаки экранирования). В ином случае вам будет необходимо использовать ключевое слово base64 перед вставкой base64-кодированных бинарных данных. Дополнительную информацию о MIME типах вы сможете найти здесь и здесь (en-US) .
Простые text/plain данные
base64-кодированная версия примера выше
HTML строка вида:
Hello, World!
HTML строка, вызывающая JavaScript alert функцию. Заметьте необходимость закрывающего тега.
Кодирование данных в формат base64
Base64 относится к группе транспортных кодировок, и позволяет представлять бинарные данные в виде ASCII строк, переводя их в radix-64 представление. Состоя только из ASCII символов, base64 строки являются допустимыми для использования в URL, по этой причине они могут быть использованы и в Data URL.
Кодирование в Javascript
Web API имеет встроенные методы для кодирования и декодирования формата base64: Base64 кодирование и декодирование.
Кодирование на Unix системах
На Linux и Mac OS X системах, кодирование файлов или строк в формат Base64 может быть выполнено через программу base64 в командной строке (или, в качестве альтернативы, программу uuencode с -m аргументом).
echo -n hello|base64 # выводит в консоль: aGVsbG8= echo -n hello>a.txt base64 a.txt # выводит в консоль: aGVsbG8= base64 a.txt>b.txt # записывает в файл b.txt: aGVsbG8=
Кодирование на Microsoft Windows
Кодирование на Windows может быть выполнено через powershell или какую-либо другую предназначенную для этого программу. Так же кодирование может быть выполнено и через программу base64 (смотрите секцию Кодирование на Unix системах), при условии активированной технологии WSL.
[convert]::ToBase64String([Text.Encoding]::UTF8.GetBytes("hello")) # выводит в консоль: aGVsbG8= bash -c "echo -n hello`|base64" # выводит в консоль: aGVsbG8= # обратный апостроф (`) используется здесь для экранирования символа вертикальной черты (|)
Распространённые проблемы
Эта секция описывает ряд проблем, которые могут возникнуть при использовании Data URL.
Для примера рассмотрим Data URL вида:
data:text/html,lots of text.bottom?arg=val
результатом декодирования которого будет HTML строка:
lots of text.bottom?arg=val
Data URL представляет собой простой формат, но даже в нём можно забыть добавить запятую перед сегментом данных или произвести ошибку во время их base64 кодирования.
Встраивание Data URL по сути является встраиванием файла внутрь файла, и длина его строки может быть намного шире, чем ширина заключающего его документа. Так же, несмотря на то, что использование пробелов считается обычной практикой при форматировании данных, есть вероятность, что у вас возникнут проблемы при их base64 кодировании.
Хотя Firefox поддерживает Data URL практически неограниченных размеров, каждый отдельный браузер имеет свои ограничения на их длину. Например, Opera 11 ограничивает допустимую длину URL до 65535 символов, что означает ограничение сегмента данных в Data URL до 65529 символов (длина в 65529 символов взята из условия использования только только data: сегмента, без определения MIME типа данных).
Опечатки в определении MIME типа или написания ключевого слова ‘base64’ будут проигнорированы без каких-либо уведомлений об ошибках.
В связи с неопределённостью типа сегмента данных в Data URL, строка параметров (характерные для страницы параметры, представляющиеся в виде ?parameter-data ), добавленная к сегменту данных будет рассматриваться, как часть этих данных.
Несколько проблем с безопасностью (например: фишинг) связаны с Data URL и переходом по ним из корневого контекста документа. Чтобы избавиться от этих проблем, переход по URI, начинающихся со схемы data:// , из корневого контекста документа перестал быть возможен в Firefox, начиная с версии 59 (и начиная с версии 58 в Nightly/Beta вариантах браузера). Надеемся, что остальные браузеры так же последуют этому примеру. Для дополнительной информации смотрите Blocking Top-Level Navigations to data URLs for Firefox 58.
Спецификации
| Спецификация | Заголовок |
|---|---|
| RFC 2397 | The «data» URL scheme |
Совместимость с браузерами
BCD tables only load in the browser
Выводим изображение в кодировке Base64 на HTML/CSS и сохраняем его на jQuery+PHP
Base64 – это некий стандарт кодирования информации посредством только 64 символов таблицы ASCII. В эту таблицу входят символы латинского языка (A-Z и a-z), цифры от 0 до 9, а также некоторые знаки.
Принцип этого кодирования – представление любой цифровой информации в виде уникального набора символов этой таблицы.
Чтобы вы наглядно понимали, что это такое, поясню. Перед вами изображение:
А вот его кодировка Base64:
data:image/gif;base64,R0lGODlhDQAMANUAAFRVVtHd74S192aZzHqVuLq0rvf39+zr6bXI4qizwufdz5WhsmSt/5rC+r3Ezm1zeJiSjmum8tzm9bvZ/6bB5a6qpn+t5dvVzZK88+v8/7vg/7DJ4P/99V5gY8zMzObm5ofD/6zQ/3Fua8fX69fm+vDy9OPi4czh/4SXrJLC/////+7u7Wmt/87f9oG2/5Oku5mZmf///wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAUUADEALAAAAAANAAwAAAZTwJhwSIwhDsUixZEkWhLNYeQVjYUYBIVKSCKeGIOCymCISTATISsCu5RKW1VAkHKBUBDToRxTcUYNGhsdFR8GW0IqJS0ZDyIrh0kqCwBIVR4eTUEAOw==
Что нас здесь интересует? Как сохранить такие данные и представить их в читабельном виде на примере все тех же изображений.
Выводим изображение в формате Base64 на HTML/CSS
В HTML встраивание подобного рода кода осуществляется с помощью всем привычного тега IMG. И на примере все той же картинки результат будет следующим:
Помимо этого, Base64 можно встроить и в CSS-файл:
div { background: url('data:image/gif;base64,R0lGODlhDQAMANUAAFRVVtHd74S192aZzHqVuLq0rvf39+zr6bXI4qizwufdz5WhsmSt/5rC+r3Ezm1zeJiSjmum8tzm9bvZ/6bB5a6qpn+t5dvVzZK88+v8/7vg/7DJ4P/99V5gY8zMzObm5ofD/6zQ/3Fua8fX69fm+vDy9OPi4czh/4SXrJLC/////+7u7Wmt/87f9oG2/5Oku5mZmf///wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAUUADEALAAAAAANAAwAAAZTwJhwSIwhDsUixZEkWhLNYeQVjYUYBIVKSCKeGIOCymCISTATISsCu5RKW1VAkHKBUBDToRxTcUYNGhsdFR8GW0IqJS0ZDyIrh0kqCwBIVR4eTUEAOw==') no-repeat; >
Какие есть преимущества у этой кодировки? Основное преимущество – это то, что изображения вы не храните на своем сервере и вообще ни на каком в принципе, а просто размещаете нужные вам файлы в теле страницы обычным текстом.
Сохранение изображения в формате Base64 на jQuery+PHP
Чуть выше мы разобрали с вами встраивание изображений непосредственно в страницу вашего сайта с помощью HTML и CSS, а сейчас мы рассмотрим способ сохранения такого изображения на вашем сайте.
В одной из статей был рассмотрен вопрос о том, как же сделать скриншот элемента на JavaScript, используя библиотеку html2canvas. В примере мы рассматривали скриншот как уже готовое изображение, но мы не упомянули, что при использовании там кода:
var my_screen = canvas.get(0).toDataURL();
можно получить изображение как раз в кодировке Base64.
Давайте попробуем сохранить это (вы можете использовать свое) изображение в кодировке Base64, используя технологию AJAX и не большой PHP-скрипт.
Начнем с jQuery. Скрипт, который будет посылать в обработчик (PHP-скрипт) наши данные, будет выглядеть следующим образом:
Где «base_image» – данные изображения в Base64, «/upload/base-image.php» – путь до PHP-скрипта, а «#result» – ID элемента, в который будет выводиться результат.
Сам же скрипт-обработчик будет выглядеть следующим образом:
else { echo "Ошибка в сохранении!"; > ?>
Здесь все предельно просто – получаем данные, обрабатываем и сохраняем их в той же директории, что и сам обработчик.
В качестве функции запуска я использовал обычную загрузку страницы, вы же можете привязать ее, например, к клику по ссылке или другому нужному вам действию.
Расписал вроде все максимально подробно, но если какие-то моменты вызывают у вас трудности, не стесняйтесь и задавайте их в комментариях – никого не оставим без внимания.
Вставить картинку в base64 из localStorage на html страницу
Имею скрипт, который добавляет картинки в localStorage в таком виде. Сами картинки отображаются на html странице, далее по клику я проверяю, был ли клик на картинку.
Если клик был проведен на картинку, она должна появиться в новом окне. Для этого мне нужно получить ее путь из localStorage , для чего пытаюсь использовать такой скрипт:
container.onclick = (e) => < var target = e.target; // элемент который вызвал событие if (target.tagName === "IMG")< console.log("img"); >else < console.log("не картинка"); >console.log(target); >; 
Сам клик записывается в target и если его вывести к консоль, то получим объект такого типа: Дальше требуется получить путь к картинке, чтобы вставить ее в уже готовый блок на странице, и вот с этим и возникла проблема.
Отслеживать
2,738 2 2 золотых знака 10 10 серебряных знаков 16 16 бронзовых знаков
задан 5 ноя 2019 в 13:07
Rostyslav Shelesko Rostyslav Shelesko
11 1 1 бронзовый знак
О каком пути речь? У Вас в base64 уже сама картинка
5 ноя 2019 в 13:09
да, саму эту строку source можно присваивать атрибуту src картинки
5 ноя 2019 в 13:19
0
Сортировка: Сброс на вариант по умолчанию
Знаете кого-то, кто может ответить? Поделитесь ссылкой на этот вопрос по почте, через Твиттер или Facebook.
- javascript
- localstorage