Image to URI, легкий способ конвертации

Приветствую всех.
Читаю давно Хабр, и как-то ни разу не упоминалось о том, есть ли какой нибудь легкий способ конвертации изображений в data: URI.
Да, конечно есть онлайн сервисы для конвертации, но когда требуется массовая конвертация, в них работать очень не удобно.

Поэтому я начал искать и нашел.

Но так как изначально, эта утилита (у меня только так, язык поворачивается), немного неудобна.
Я взялся за допиливание этой утилиты.

Вот что получилось
Для начала посмотрите видео, сразу станет многое понятно.


HD ссылка на YouTube

А теперь чуть подробнее.

Имеется вот такой архив.
image

В нем…
image

Ну и полностью вот…
image

Мы хотим перевести вот эту картинку в data: URI
image

Для этого кидаем ее в папку image2css и запускаем пакетничек z_1.cmd
На выходе получаем готовый файл с data: URI

image

Примечание:
1. Можно сделать конвертацию массово для этого в архиве есть файл z_.cmd
2. В этом архиве есть Notepad2, он нужен для того чтобы показать нам код, так как родной Notepad меня жутко раздражает.
3. В папку можно кидать файл с любым названием, он автоматически переименуется в favicon.png.
4. Если вы хотите закодировать GIF изображение то, для этого нужно всего лишь, в файле z_1.cmd поменять расширение на gif.
5. Так как я парень забывчивый то сделал автобэкап всех сконветированных файлов.
Т.е. папки
aspng — хранит в себе все сконвертированные png картинки
asuri — хранит в себе все сконвертированные URI текстовые файлы.

И еще, не забудьте утилите нужна установленная Java.

Ну и сама утилита image2css.7z на Яндекс Диск.

Надеюсь, вам поможет мой скрипт, потому что делал для себя, ну и думаю, совсем не красиво будет не поделиться с народом.

UPD 1.
Дабы труды комментаторов не пропали даром, потому как статья уже в индексе и поможет первопроходцам да и просто web-мастерам.

Способ 1
Конвертация силами PHP от zapimir
<form method="post" action="#" enctype="multipart/form-data"><input type="file" name="file"/> <input type="submit" value="Кодировать в URI"/></form>

<?php 
if(isset($_FILES['file'])){
    echo "<textarea rows='1' cols='1' style='margin:10px;width:100%;height:800px;border:2px solid #333'>url(data:{$_FILES['file']['type']};base64,
    " . base64_encode(file_get_contents($_FILES['file']['tmp_name'])) . ')</textarea>';
}
?>


Способ 2
Конвертация силами Linux от Stdit
$ find . -name "*.png" -exec echo {} " -> " \; -exec base64 {} \;


Способ 3
Конвертация силами windows программы от silvansky
Data URI Generator
Программа встраивает свой пункт меню, при нажатии ПКМ на css файле.
И из исходного css (в котором ссылки к картинкам) генерит в отдельный css (data uri)
Метки:
Поделиться публикацией
Похожие публикации
Комментарии 42
  • +2
    Кстати, именно с помощью этой утилиты, я сконвертировал картинки на своем сайте 6410.ru/omsk
    • +7
      Ссылка на сайт дана, ради того чтобы можно было воочию увидеть, сколько картинок было сконвертировано.
      Потому как в личке спрашивали где было применение этой утилите.
      • +1
        прям вот так спрашивали, что первым же комментом оказался ваш со ссылкой? :)

        кстати, получится реальный выигрыш в сравнении с вариантом со спрайтами?
        • +1
          Первым письмом, полученным мною на Хабре, был вопрос целесообразности данной утилиты и месте применения.
          Поэтому, для предотвращения подобного вопроса, сразу же был дан такой ответ.
          А по поводу спрайтов, это конечно хорошо, но иконки для сайтов постоянно меняются, а следовательно мне пришлось бы постоянно менять картинку (что согласитесь не так просто когда их много), а так же менять CSS 100500 background-position:
          • 0
            ну, дело удобства и привычки. я бы спрайтами делал — поэтому и спросил про объективный выигрыш (не связанный со временем добавления изменений, но со скоростью загрузки/количеством запросов к серверу).
    • –1
      а может есть ссылка на алгоритм? можно было бы под .NET написать
      • +3
        Алгоритм простейший, пример на php:
        <?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.
        • +1
          Для полноты — описание и пример алгоритма кодирования и декодирования base64 на C++: www.kbcafe.com/articles/HowTo.Base64.pdf (английский язык).
          • 0
            Меня опередили +1
            • 0
              Давно собирался прикрутить себе в assets manager такое (парсим css на наличие background изображений, выкачиваем, кодируем и заменяем + попутно перед этим можно проверять размер файла изображения), но все руки никак не доходят. Сегодня займусь.
              • +1
                Я такой скриптец написал, лениво было править названия файлов, а так закидываешь через форму, потом вставляешь в 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>';
                }
                
                • +1
                  Вот за это спасибо!
                  Все таки моментальная конвертация на своем локальном сервере лучше, чем сервисы.

                  Вот оно готовое решение, а как кинешься искать нужный сервис в интернете, так что-то да не подходит.

                  • 0
                    Не проще в консоли все файлы в папке жахнуть и потом скопировать в css? Как-нибудь так:
                    $ find . -name "*.png" -exec echo {} " -> " \; -exec base64 {} \;
                    
                    Или дев-сервер на винде?
                    • 0
                      Ну если такое катит на Linux, то не проблема воткнуть в Virtual Box последнюю Ubuntu, и там сконвертить.
                      Код сработает?!
            • –2
              Алгоритма не знаю. Все, что я сделал, это удобная форма работы вот этой утилиты (написанной на Java).
              • 0
                Может скажете почему я должен знать алгоритм?!
                Мне нужен инструмент и он у меня есть.
              • +8
                Ради такого яву тащить… ох.
                • +1
                  Если близко воробей, мы готовим пушку…
                  • –1
                    Понятное дело что пушка, но на тот момент когда мне это нужно было, была только пушка.
                    Онлайн сервисы не в счет.
                    Ну и еще мало информации по этой теме.
                • +4
                  На 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
                  

                  • 0
                    И вызывать как createfi.sh myimage.png mystyle.css
                    • +1
                      Исправленная версия:
                      #!/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
                      
                      • 0
                        Хм… А не подскажете чем дернуть content type что-б не только png?
                        • 0
                          ну, скажем, FORMAT=`sips -g format favicon.png | tail -1|cut -d" " -f4`или что-нибудь аналогичное, кодировщику-то все равно.

                          Кстати, у кого нет sips, может использовать identify из ImageMagick и т.д.; если вдруг нет обертки «base64», можно напрямую вызывать openssl enc -base64 -in $1 |tr -d '\n'
                          • +2
                            format=`file -i workvote.jpg | awk '{print $2}'`
                            • +1
                              вернет сразу image/jpeg; — с точкой с запятой
                              • +1
                                Спасибо. Ну а рекурсивный обход каталога я уже сам соображу.
                      • 0
                        В data url одна проблема — длинна url не может быть больше 2 килобайт. Так что далеко не все картинки таким образом можно передавать.
                        • 0
                          С чего Вы взяли? Даже в IE8 (более древние версии не поддерживают) — 32 КБ, а в IE9 можно до 4ГБ туда запхать.
                          • +2
                            alxbuk.tumblr.com/temp вот показатель открывается в любом браузере, кроме IE.
                            Картинка там весом в 35КБ.
                            Так что, как мне кажется только IE впереди планеты всей, и только для него такое ограничение
                            • 0
                              Нормально все в ИЕ открывается.
                              • +1
                                Может быть в 9?!
                                А в 8 не открывается.
                                • 0
                                  В IE8 ограничение 32 КБ, писал выше.
                              • 0
                                Забавно) Открывается нормально, но свойства весьма странные.
                                В своё время баловался и «перекодированием» картинок в таблицы с каждой ячейкой соответствующего цвета. Открывалось долго, весило много. Зато видишь картинку, но внутри чистый html ))
                                Ещё можно капчи цифровые делать на табличках, со случайными стилями каждой ячейки. В браузере нормально нарисуется и без графики, а ботов подкручивать надо на это.
                              • +1
                                Вывод старый как мир — делать make для обработки своих css, и прогонять его, когда нужно, по файлам проекта. И уже он пусть разбирается (по нами указанным правилам, конечно), что и куда включать и как кодировать.

                                Руками по одной картинки переводить в css-запись — не совсем чтобы полезная трата времени. «Машина должна работать, а человек — думать».
                              • +1
                                Вот подготовил еще одну статью, а куда писать в какой хаб?!
                                Молодым везде у нас дорога!
                                • 0
                                  Один хороший человек попросил тут выложить решение для винды:

                                  Data URI Generator

                                  Встраивается в проводник.
                                  • 0
                                    Кстати, ничто не мешает сделать GUI-решение для мака на базе моего же скрипта (см. выше), обёрнутого в Automator. Для Linux'а так же можно прикрутить этот скрипт к контекстному меню.
                                    • 0
                                      Интересная вариация, только что попробовал, сработало.
                                      1. Но не всегда необходимо вставлять data URI в CSS, иногда нужно просто вывести в *.php
                                      2. В принцип, не всегда нужно вставлять картинки в CSS.
                                      А программа эта делает именно так.
                                      Хотя не спорю инструмент полезный.

                                      Подсказка: Программа встраивает свой пункт меню, при нажатии ПКМ на css файле.
                                    • 0
                                      А никто не подскажет, за что автора топика в ридонли перевели?
                                      • 0
                                        Ещё способ. Перетаскиваем изображение в редактор векторной графики Inkscape, на вопрос внедрить или привязать изображение выбираем «внедрить». Потом вызываем редактор DOM (Ctrl+Shift+X) и копируем значение атрибута SRC.
                                        • 0
                                          Для тех, кому изредка нужно делать такие конвертации, можно использовать расширение к Google Chrome:
                                          chrome.google.com/webstore/detail/khagclindddokccfbmfmckaflngbmpon
                                          Правый клик по картинке -> Свойства изображения -> Data URI: view data

                                          Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.