Хабр Курсы для всех
РЕКЛАМА
Практикум, Хекслет, SkyPro, авторские курсы — собрали всех и попросили скидки. Осталось выбрать!
Хабр доступен 24/7 благодаря поддержке друзей
Комментарии 42
Кстати, именно с помощью этой утилиты, я сконвертировал картинки на своем сайте 6410.ru/omsk
Ссылка на сайт дана, ради того чтобы можно было воочию увидеть, сколько картинок было сконвертировано.
Потому как в личке спрашивали где было применение этой утилите.
Потому как в личке спрашивали где было применение этой утилите.
прям вот так спрашивали, что первым же комментом оказался ваш со ссылкой? :)
кстати, получится реальный выигрыш в сравнении с вариантом со спрайтами?
кстати, получится реальный выигрыш в сравнении с вариантом со спрайтами?
Первым письмом, полученным мною на Хабре, был вопрос целесообразности данной утилиты и месте применения.
Поэтому, для предотвращения подобного вопроса, сразу же был дан такой ответ.
А по поводу спрайтов, это конечно хорошо, но иконки для сайтов постоянно меняются, а следовательно мне пришлось бы постоянно менять картинку (что согласитесь не так просто когда их много), а так же менять CSS 100500 background-position:
Поэтому, для предотвращения подобного вопроса, сразу же был дан такой ответ.
А по поводу спрайтов, это конечно хорошо, но иконки для сайтов постоянно меняются, а следовательно мне пришлось бы постоянно менять картинку (что согласитесь не так просто когда их много), а так же менять CSS 100500 background-position:
а может есть ссылка на алгоритм? можно было бы под .NET написать
Алгоритм простейший, пример на php:
т.е. всё что надо — это алгоритм кодирования байтов в base64.
<?php
$in = 'i.gif';
$out = 'i.html';
$fin = file_get_contents($in); // Получаем файл $in
$fout = base64_encode($fin); // Кодируем в base64
$html = '<img src="data:image/gif;base64,'.$fout.'">'; // Генерирует картинку для сохранения в html
file_put_contents($out, $html); // Сохраняем страницу
?>
т.е. всё что надо — это алгоритм кодирования байтов в base64.
Для полноты — описание и пример алгоритма кодирования и декодирования base64 на C++: www.kbcafe.com/articles/HowTo.Base64.pdf (английский язык).
Меня опередили +1
Давно собирался прикрутить себе в assets manager такое (парсим css на наличие background изображений, выкачиваем, кодируем и заменяем + попутно перед этим можно проверять размер файла изображения), но все руки никак не доходят. Сегодня займусь.
Я такой скриптец написал, лениво было править названия файлов, а так закидываешь через форму, потом вставляешь в CSS.
<form method="post" enctype="multipart/form-data"><input type=file name=file><input type=submit></form>
<?php
if(isset($_FILES['file'])){
echo "<textarea style='width:100%;height:400px;'>url(data:{$_FILES['file']['type']};base64,
" . base64_encode(file_get_contents($_FILES['file']['tmp_name'])) . ')</textarea>';
}
Алгоритма не знаю. Все, что я сделал, это удобная форма работы вот этой утилиты (написанной на Java).
Ради такого яву тащить… ох.
На shell script сделать проще и быстрее.
#!/bin/sh
WIDTH=`sips -g pixelWidth $1 | tail -n1 | cut -d" " -f4`
HEIGHT=`sips -g pixelHeight $1 | tail -n1 | cut -d" " -f4`
echo ".favicon_png:{ background:url(data:image/png;base64,`base64 $1`) top left no-repeat;); height: ${HEIGHT}px; width: ${WIDTH}px; }" > $2
И вызывать как
createfi.sh myimage.png mystyle.cssИсправленная версия:
#!/bin/sh
WIDTH=`sips -g pixelWidth $1 | tail -n1 | cut -d" " -f4`
HEIGHT=`sips -g pixelHeight $1 | tail -n1 | cut -d" " -f4`
BASE64=`base64 $1`
echo ".favicon_png:{ background:url(data:image/png;base64,${BASE64}) top left no-repeat;); height: ${HEIGHT}px; width: ${WIDTH}px; }" > $2
В data url одна проблема — длинна url не может быть больше 2 килобайт. Так что далеко не все картинки таким образом можно передавать.
С чего Вы взяли? Даже в IE8 (более древние версии не поддерживают) — 32 КБ, а в IE9 можно до 4ГБ туда запхать.
alxbuk.tumblr.com/temp вот показатель открывается в любом браузере, кроме IE.
Картинка там весом в 35КБ.
Так что, как мне кажется только IE впереди планеты всей, и только для него такое ограничение
Картинка там весом в 35КБ.
Так что, как мне кажется только IE впереди планеты всей, и только для него такое ограничение
Нормально все в ИЕ открывается.
Забавно) Открывается нормально, но свойства весьма странные.
В своё время баловался и «перекодированием» картинок в таблицы с каждой ячейкой соответствующего цвета. Открывалось долго, весило много. Зато видишь картинку, но внутри чистый html ))
Ещё можно капчи цифровые делать на табличках, со случайными стилями каждой ячейки. В браузере нормально нарисуется и без графики, а ботов подкручивать надо на это.
В своё время баловался и «перекодированием» картинок в таблицы с каждой ячейкой соответствующего цвета. Открывалось долго, весило много. Зато видишь картинку, но внутри чистый html ))
Ещё можно капчи цифровые делать на табличках, со случайными стилями каждой ячейки. В браузере нормально нарисуется и без графики, а ботов подкручивать надо на это.
Вывод старый как мир — делать make для обработки своих css, и прогонять его, когда нужно, по файлам проекта. И уже он пусть разбирается (по нами указанным правилам, конечно), что и куда включать и как кодировать.
Руками по одной картинки переводить в css-запись — не совсем чтобы полезная трата времени. «Машина должна работать, а человек — думать».
Руками по одной картинки переводить в css-запись — не совсем чтобы полезная трата времени. «Машина должна работать, а человек — думать».
Вот подготовил еще одну статью, а куда писать в какой хаб?!
Молодым везде у нас дорога!
Молодым везде у нас дорога!
Один хороший человек попросил тут выложить решение для винды:
Data URI Generator
Встраивается в проводник.
Data URI Generator
Встраивается в проводник.
Кстати, ничто не мешает сделать GUI-решение для мака на базе моего же скрипта (см. выше), обёрнутого в Automator. Для Linux'а так же можно прикрутить этот скрипт к контекстному меню.
Интересная вариация, только что попробовал, сработало.
1. Но не всегда необходимо вставлять data URI в CSS, иногда нужно просто вывести в *.php
2. В принцип, не всегда нужно вставлять картинки в CSS.
А программа эта делает именно так.
Хотя не спорю инструмент полезный.
Подсказка: Программа встраивает свой пункт меню, при нажатии ПКМ на css файле.
1. Но не всегда необходимо вставлять data URI в CSS, иногда нужно просто вывести в *.php
2. В принцип, не всегда нужно вставлять картинки в CSS.
А программа эта делает именно так.
Хотя не спорю инструмент полезный.
Подсказка: Программа встраивает свой пункт меню, при нажатии ПКМ на css файле.
А никто не подскажет, за что автора топика в ридонли перевели?
Ещё способ. Перетаскиваем изображение в редактор векторной графики Inkscape, на вопрос внедрить или привязать изображение выбираем «внедрить». Потом вызываем редактор DOM (Ctrl+Shift+X) и копируем значение атрибута SRC.
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Image to URI, легкий способ конвертации