Делаем фотографию только средствами php+css+html

    На днях мне приснилась бесполезная, но прикольная мысль, а что если попытаться создавать изображения только при помощи php и библиотеке GD2, CSS и HTML. Сказано-сделано.
    Идея очень простая — берем исходное изображение, пробегаем по всем его пикселя и узнаем код цвет каждого, после этого создаем див размеров 1px на 1px и задаем ему цвет фона такойже как и у исходного пикселя в изображении. В результате получаем полный аналог графического собрата. Но правда чтобы наслождаться HTML-графикой нужен хороший процессор и современный браузер.

    Результат моего эксперемнта можно увидеть тут: HTML-фотосумашествие. Вся суть заключена в исходном коде страницы. Но перед тем как смотреть, на всякий случай откройте отдельное окно браузера, желательно чтобы это был Chrome, он точно справится.

    Конечно, на промышленное применение это не потянет, но как just for fun — вполне сойдет.
    Поделиться публикацией

    Похожие публикации

    AdBlock похитил этот баннер, но баннеры не зубы — отрастут

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

    Комментарии 96

      0
      супер, больше сказать даже нечего.
        +7
          +1
          Отлично!

          Кстати, практическое применение вполне может быть, слишком хорошая и простая идея, чтобы быть бесполезной :)
            +1
            Ну вообще я предполагал что это так, но решил проверить на каком кол-ве divов станет плохо браузеру.
            • НЛО прилетело и опубликовало эту надпись здесь
                +3
                И гипертекстовый, заметьте! :)
                  0
                  Реквистируем Мицгола.
                    0
                    а где там гипертекст-то? :\
                  +4
                  Чтоб картинка была видна с отключёнными изображениями, ещё легче вставить в виде base64 кода в src.
                  Спасибо за тесты. Моя, более больная идея сделать джаваскрипт редактор изобращений тока что немного обломалась. Будем искать…
                    +2
                    Из тойже истории, когда было нечего делать, наваял небольшой графический редактор на raphael+js: pihel.jino.ru/canvas/
                      0
                      Так симпатизирует SVG. Но масдайщики как всегда в своём духе. Может одумаются?
                        0
                        У них уже есть VML. Но так один стандарт конечно лучше.
                        • НЛО прилетело и опубликовало эту надпись здесь
                      +6
                      По сравнению с Гомером Симпсоном (http://www.romancortes.com/blog/homer-css/) как-то слабовато ;)
                        +12
                        sciphone n19+android 1.5+opera mini — первый хард ресет за 3 месяца=)))
                        телефон просто высрал кирпичами — «ЗА ЧТО??»
                          +1
                          хард ресет-то зачем?
                            0
                            ну типо экран погас, только подстветка кнопок работает.
                            Типо на на 3(5,7,10)-сек удержание кнопки выключить не реагирует(типо она прогармная.)
                            Так что пришлось тыкнуть иголкой в фиговину, о которой кадый вледлец WM знает не по-наслышке=)
                              +11
                              Это софт ресет. =) Хард ресет — это когда полный возврат к заводским установкам с удалением пользовательских данных и его обычно так просто не сделать =)
                                0
                                у моей WM хард резет был при сочетании кнопки софт-резета и кнопки включения и удержания их несколько секунд
                          0
                          не новая вещь. друг писал такое вот http://braingears.ru/myfiresoul.html
                            +19
                            1) Одинаковые цвета в идущих подряд пикселях нужно объединять в один элемент.
                            2) Вместо div лучше взять что-то покороче, b или i.
                            3) Конвертировать нужно не JPG, иначе много шума и первый пункт будет без толку.
                            4) RGB(255,255,255) длинее, чем #fff.
                            5) Gzip! Gzip! Gzip!
                              0
                              > 4) RGB(255,255,255) длинее, чем #fff.
                              еще рациональнее сделать цсску с каким-нибудь классом
                              .w{
                              background: #fff
                              }
                                +1
                                Один преобладающий цвет можно вынести в background родителя.
                                0
                                после того как сервер ляжет я думаю все это сделается )))

                                ЗЫ забавно но ФФ быстрее отрисовал ЭТО на неакктивной вкладе, чем на активной *SCRATCH*
                                  0
                                  Это логично, ведь он не дёргает дерево и не перерисовывает каждый раз
                                  –1
                                  Спасибо, я примерно такие же действия думал проделать.
                                  1)Попробую продумать более эффективный алгоритм оптимизации
                                  2)div на i или b — думал об этом, но экономию в 4 символа сначала посчитал незначительной, но практика показала что стоит это применить.
                                  3)Спасибо, об этом не думал.
                                  4)думал, но чтобы получить 6-ти значный hex каждый раз надо вызывать функцию по преобразованию rgb в hex — и я решил сервер пожалеть. Но вообще попробую.
                                  5)Тоже хороший совет, спасибо!
                                    +1
                                    Она у вас каждый раз чтоли генерируется? А кеширование?
                                      0
                                      Ну пока все вообще допотопно — для чистоты эксперимента, но прочитав все комменты, думаю надо сделать продвинутую версию, на этот раз чтобы не пределы браузеров оценивать, а чтобы получить более менее приемлемый результат по размеру файла и скорости его загрузки.
                                        0
                                        это видимо нагрузочное тестирование железа )))
                                      +1
                                      Исходный код страницы на FF 3.6 так долго грузился, что я не поленился уйти заваривать чай.

                                      В качестве оптимизации можно тащить с собой base64 от gif (ну или lzw от bmp) а рендерить в div'ы джаваскриптом через DOM, да и много как ещё можно.

                                      А вообще, забавно.
                                        0
                                        у меня грузился секунды 2.
                                        +2
                                        Еще при оптимизации можно использовать цвет бордера.

                                        Даже какой-то спортивный азарт появился — во сколько раз получиться уменьшить код ))
                                          0
                                          еще, как уже писали выше — вынести цсс
                                          плюс к этому использовать разные односимвольные теги (a i b p u)
                                            0
                                            можно вообще отказаться от кодирования цветов через параметр style, прописать палитру в css и использовать классы — так код сократится почти вдвое.
                                            также можно жать хтмл-код gzipом :)

                                            хмм, еще можно подумать об альфа-канале ))
                                            0
                                            Любой «экстрим» помогает узнать границы технологии.
                                            Я не ожидал, что такой относительно небольшой файл будет так тормозить.
                                            Он notepad'ом++ открывается еле-еле (~816KB). А другой файлик (~9,6MB) просто летает в нем.
                                            Может быть попробовать дивы выводить не в одну строку?
                                              0
                                              Спасибо, вы подвесили мой нетбук на 2 минуты
                                                +7
                                                а ты попробуй ещё это файербагом посмотреть ;)
                                                  +2
                                                  Пожалуй, я не буду этого делать
                                                +12
                                                товарищи!
                                                зато мы теперь все знаем зачем нам нужны 128 ядерные процессоры! )))
                                                  +1
                                                  рано или поздно, обычно очень поздно (под утро), такие идеи приходят каждому =) но реализовать не у всех хватает нервов, или просто вовремя задают себе вопрос «Зачем? Лучше спать пойду»
                                                    0
                                                    Вашу б энергию, да в мирное русло… :)
                                                      +1
                                                      Кстати, если теоретически прикинуть, взять мощный сервер, добавить javascript, то можно даже на анимацию замахнуться или даже на видео… Но реализацию этой задумки, я думаю, надо отложить пока лет на 5)))
                                                        +4
                                                        Действительно, зачем нам тег <video>, какой-то HTML5.
                                                        Мы в лоб джаваскриптом видео реализeзуем )))
                                                          +1
                                                          Поэтому нас русских никогда не победить! :)
                                                          0
                                                          У вас после 5, ноль в скобку превратился кажись…
                                                        +1
                                                        Свежая аццкая идея: можно делать на этой основе капчи! :D
                                                          0
                                                          Я уже автору в личку это предложил, даже посильную помощь :)

                                                          А что автору нужно сделать, так это каждый див на новую строку поставить. Это будет куда легче для редакторов :)
                                                            0
                                                            Да ну. Берусь написать за полчаса скрипт, который не основе тех div'ов будет генерить растровую картинку обратно.
                                                            Более того, для успешного машинного распознавания капчи цвета не обязательно должны быть такие, как в оригинале. Поэтому можно спокойно забить на то, что часть цветов будет описана в CSS
                                                              0
                                                              есть впечатление, что кто-то слишком серьезно воспринял данную идею :)
                                                                0
                                                                я то — нет :)
                                                                А вот товарищ выше уже предлагал помощь автору топика в написании такой капчи :)
                                                                  +1
                                                                  ну тада мир, дружба, жвачка :D
                                                                    +1
                                                                    тогда ждем нового стартапа!
                                                            +2
                                                            желательно чтобы это был Chrome, он точно справится.
                                                            У меня, кстати, в хроме открывается намного медленнее, чем в Опере. Еще и глючить при изменении масштаба страницы.
                                                            • НЛО прилетело и опубликовало эту надпись здесь
                                                              0
                                                              А разве с использованием таблицы работать быстрее не будет?
                                                                0
                                                                Firefox 3.6, всё хорошо, но опосля закрытия вкладки сборщик мусора собирает долго.
                                                                  +1
                                                                  Перенесите в Я безумный =)
                                                                    0
                                                                    Перенесите в Информационная Безопасность — это же готовый эксплоит для Firefox )
                                                                      –3
                                                                      при помощи php и библиотеке GD2

                                                                      Ммм… Новый способ склонять слова :)
                                                                      пробегаем по всем его пикселя

                                                                      Афтар скушал букву
                                                                      узнаем код цвет

                                                                      Мощно. Узнаём и код, и цвет. Хотя речь явно про код цвета. Опять букву скушал, афтар очень голодный :)
                                                                      такойже
                                                                      наслождаться

                                                                      Сахар — слОдкий

                                                                      Афтар в ударе. Желаю чтобы в следующий раз ему приснился словарик :0)

                                                                      Идея — баян. Даже не оптимизировали код с помощью CSS (то что Вы сделали в атрибуте style каждого div-а я затрудняюсь назвать, но это явно не оптимизация, а ерунда на постном масле)

                                                                      PS: топику поставил минус, но за полученное мной удовольствие (от разбора текста по винтикам) ставлю в карму плюс. С искренней надеждой не увидеть больше такого на Хабре )))
                                                                        +6
                                                                        Ммм… Новый способ склонять слова :)
                                                                        Афтар скушал букву
                                                                        Мощно. Узнаём и код, и цвет. Хотя речь явно про код цвета. Опять букву скушал, афтар очень голодный :)
                                                                        Сахар — слОдкий
                                                                        Афтар в ударе. Желаю чтобы в следующий раз ему приснился словарик :0)

                                                                        всегда раздражали люди подобного типа — умники которые пытаются изящно пошутить, но получается натянутая хуита.
                                                                        PS: я грамотный. Поэтому болезненно реагирую на ошибки и коверканье русского языка. Сам ошибок практически не делаю, зато опечатками страдаю

                                                                        раз ты такой граммар-наци, че ж ты «автора» коверкаешь?
                                                                        • НЛО прилетело и опубликовало эту надпись здесь
                                                                            –1
                                                                            Ни рыба ни мясо

                                                                            Вот примерно именно это я и хотел выразить ;)
                                                                            Хоть один человек понял :)
                                                                            –3
                                                                            Это было не коверканье. А тонкий намёк на толстые обстоятельства. Вам не понять
                                                                              –1
                                                                              хреново потому что намекаешь может быть?
                                                                              а то, что щас заявляешь, что публично с издевкой обращался к автору топика, то ты вдвойне мудак.
                                                                              ты там снизу ответил:
                                                                              А теперь, пожалуйста, огласите мои ошибки. Публично, я разрешаю :))) Заинтриговали, серьёзно

                                                                              у тебя по ходу совсем все плохо с головой, поэтому претензий к тебе больше не имею
                                                                                –2
                                                                                публично с издевкой

                                                                                Вот только не надо искажать факты, хорошо? Не надо ля-ля
                                                                                Если бы я издевался, у меня не было бы ни одного смайла и комментарий был бы совсем в другом тоне
                                                                                у тебя по ходу совсем все плохо с головой

                                                                                К чему это цитирование? Что тут не так в моей просьбе «огласите мои ошибки»? Мне говорят про МОИ ошибки, я их у себя НЕ замечаю и прошу их огласить

                                                                                То бишь я хочу узнать свои ошибки, которых не вижу, задаю вопрос — и это нынче называется «совсем плохо с головой»? Обалдеть. Суровые времена

                                                                                PS: ах да. Минусуйте, минусуйте, я из принципа не буду ставить Вам минус в карму
                                                                                PPS: если надумаете давать ответный комментарий, не забудьте указать свою дату рождения. Интересно же. Я так вот хоть и «мудак», а не скрываю данную информацию. Вы же вешаете таблички на других, скрывая сведения о себе
                                                                                PPPS: и тыкать мне тоже не надо, мы с вами на брудершафт не пили. В связи с этим «тыканьем» мне тем более интересно узнать Ваш возраст
                                                                                  –1
                                                                                  ты такой пафосный
                                                                            +1
                                                                            Зато я наелся! Жалко, что не вы были моим учителем в школе; столь доходчивые объяснения, я уверен, принесли бы мне куда больше пользы!
                                                                              0
                                                                              Вы бы сначала на свои ошибки обратили внимание, чтобы потом стыдно не было. О таких вещах, к слову, принято писать лично автору.
                                                                                –2
                                                                                А теперь, пожалуйста, огласите мои ошибки. Публично, я разрешаю :))) Заинтриговали, серьёзно
                                                                                («афтар» не в счёт, я это слово прокомментировал чуть выше)

                                                                                В личку я пишу, вместо того чтобы предавать опечатки публичной огласке (да-да, поверьте), но не всегда. Данный случай был слишком тяжёлым и поэтому я решился на более болезненную процедуру, предвидя весь поток критики в мой адрес
                                                                              0
                                                                              Ну, за примером далеко ходить не надо — www.thematicmedia.ru/
                                                                                0
                                                                                Можно круто сократить, если сделать картинку в виде json массива с цветами в hex, а потом с помощью javascripta выводить.
                                                                                  0
                                                                                  Какая хорошая капча.
                                                                                    0
                                                                                    Новый шаг к созданию векторного гипертекстового самизнаетекого? :)
                                                                                    Вообще круто, жаль что сравнительно долго грузиться.
                                                                                    • НЛО прилетело и опубликовало эту надпись здесь
                                                                                      0
                                                                                      Хм… А если это использовать при оптимизации загрузки страницы сделав в таком виде, к примеру, иконки 16x16px? Меньше запросов к серверу — быстрее грузится страница
                                                                                        0
                                                                                        Если я правильно посчитал:
                                                                                        минимальный — видимо это наименьший возможный размер кода для одного пикселя, если не рассматривать вариант с объединением в один блок одинаковых цветов, то 17 символов (в UTF) умножим дважды на 16 — получим 4352 байта для одной иконки. При этом, картинка, даже в PNG, весить будет около 450-500 байт.
                                                                                          0
                                                                                          так, HTML съелся. Вот что хотел написать — {р class=«a»}{/р} — видимо это наименьший возможный размер кода
                                                                                            0
                                                                                            <p class="a"> — достаточно. P можно не закрывать (черт, как я сам не додумался выше порекомендовать p :)
                                                                                            0
                                                                                            А если оптимизировать как тут предлагали?
                                                                                            -задать класс
                                                                                            -использовать тэги короче
                                                                                            -объединить близлежащие дивы
                                                                                            -цвета перевести в HEX

                                                                                              0
                                                                                              или даже не class, а id
                                                                                                0
                                                                                                Ну id точно нет, т.к. для иконок 16X16, в рамках одного дизайна, впринципе можно выделить каждый цвет в отдельный однобуквенный класс, и потом использовать повторно. А id — это для каждого пикселя (читай блока) нужен будет свой класс, что повлечет за собой еще css-ину куда большего размера.
                                                                                                  0
                                                                                                  Хм… А разве #w {background:#fff;} не имеет место быть?
                                                                                                    0
                                                                                                    ну так элемент с ID «w» может быть только один на странице. Поэтому, в лучшем случае, css получиться примерно таким #w1, #w2, #3 {background:#fff;}. А если мы создадим просто класс .w{background:#fff;} и для всех белых пикселей будет указывать его, то это даст большую экономию, если рассматривать итоговый результат.
                                                                                                      0
                                                                                                      Пожалуй, да.
                                                                                                      А если вернуться к вопросу оптимизации страницы и предположить, что наши иконки имеют, в основном, одну цветовую гамму то тут можно добиться экономии в размерах (не только в запросах на сервер). Такой способ можно использовать наряду с тем, который предлагают на webo.in
                                                                                                      Попробовать бы конвертер на примерах…
                                                                                                      • НЛО прилетело и опубликовало эту надпись здесь
                                                                                              0
                                                                                              Боже мой! Зачем изобретать уже существующий велосипед?
                                                                                              ru.wikipedia.org/wiki/Data:_URL
                                                                                              webo.in/articles/habrahabr/46-cross-browser-data-url/

                                                                                              p.s. почему то не работают здесь html тэги.
                                                                                                0
                                                                                                Data:_URL не очень дружит c IE.
                                                                                                К тому же можно большую часть изображения разместить в css, а значит для него будет доступно кэширование
                                                                                                  0
                                                                                                  Так я же привёл вторую ссылку, там workaround для IE.
                                                                                                  Это уже промышленное и экономичное решение, используется в duris.ru, web optimizer.
                                                                                                  Для небольших иконок и прозрачных гифов самое то.
                                                                                              0
                                                                                              Кстати, в тему про капчи, можноли с помощью php генерить анимированный gif? Если можно, тогда надо сделать чтобы символы в капчи появлялись поочередно. Причем скорость появления была различной.
                                                                                                0
                                                                                                Причем скорость появления была различной.
                                                                                                Да, вот это точно обескуражит электронный мозг. «Как это с разной скоростью», подумает он и откажется распознавать.
                                                                                                0
                                                                                                А еще такие картинки должны отображаться даже если в браузере выключен показ изображений
                                                                                                  0
                                                                                                  Ну картинки отключают чтобы трафик экономить, а такой способ явно этому не содействует. Лучше классическая замена на текст.
                                                                                                  0
                                                                                                  А можно как-то покомпактней такой код сделать? Штука-то хорошая, для использования в качестве подставления ОЧЕНЬ нужной на сайте картинки — может и пригодиться.

                                                                                                  Еще можно сделать неплохой тест на скорость ренедеринга. Опера вот показала, даже не подавилась — только картинку построчно несколько секунд прорисовывала (проц Turion 64 X2 1.61Ghz, Win7), исходник вообще не задумываясь вывела даже с огромным JS от AdMuncher. А вот IE8 намертво загрузил систему… Уже 10 минут думает.
                                                                                                  • НЛО прилетело и опубликовало эту надпись здесь
                                                                                                      0
                                                                                                      почти офтопик — я бы поменял тэг html-вёрска на html-вёрстка
                                                                                                        0
                                                                                                        Самое прикольное, что на этой идее можно сделать капчу, которую генерить различными тегами и прогеры задолбаются писать парсары-распознавалки таких капч.

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

                                                                                                        Самое читаемое