Alx Buk @alexbuk read-only
Пользователь
23 апреля 2012 в 16:23

Разработка → 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)
Alx Buk @alexbuk
карма
2,0
рейтинг 0,0
Реклама помогает поддерживать и развивать наши сервисы

Подробнее
Реклама

Самое читаемое Разработка

Комментарии (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

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