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

[@alexeydg]

супер, больше сказать даже нечего.

[@TheRipper]

Идея не нова
www.google.com/search?q=image+to+html+converter

[@mifa]

Отлично!

Кстати, практическое применение вполне может быть, слишком хорошая и простая идея, чтобы быть бесполезной :)

[@BANTIK]

Ну вообще я предполагал что это так, но решил проверить на каком кол-ве divов станет плохо браузеру.

[@alcanoid]

И гипертекстовый, заметьте! :)

[@sgnppv]

Реквистируем Мицгола.

[@fltz]

а где там гипертекст-то? :\

[@leoneed]

Чтоб картинка была видна с отключёнными изображениями, ещё легче вставить в виде base64 кода в src.
Спасибо за тесты. Моя, более больная идея сделать джаваскрипт редактор изобращений тока что немного обломалась. Будем искать…

[@pihel]

Из тойже истории, когда было нечего делать, наваял небольшой графический редактор на raphael+js: pihel.jino.ru/canvas/

[@leoneed]

Так симпатизирует SVG. Но масдайщики как всегда в своём духе. Может одумаются?

[@pihel]

У них уже есть VML. Но так один стандарт конечно лучше.

[@dohlik]

По сравнению с Гомером Симпсоном (http://www.romancortes.com/blog/homer-css/) как-то слабовато ;)

[@NikitaG]

sciphone n19+android 1.5+opera mini — первый хард ресет за 3 месяца=)))
телефон просто высрал кирпичами — «ЗА ЧТО??»

[@skel2007]

хард ресет-то зачем?

[@NikitaG]

ну типо экран погас, только подстветка кнопок работает.
Типо на на 3(5,7,10)-сек удержание кнопки выключить не реагирует(типо она прогармная.)
Так что пришлось тыкнуть иголкой в фиговину, о которой кадый вледлец WM знает не по-наслышке=)

[@eXod]

Это софт ресет. =) Хард ресет — это когда полный возврат к заводским установкам с удалением пользовательских данных и его обычно так просто не сделать =)

[@4udik]

у моей WM хард резет был при сочетании кнопки софт-резета и кнопки включения и удержания их несколько секунд

[@Alroniks]

не новая вещь. друг писал такое вот http://braingears.ru/myfiresoul.html

[@homm]

1) Одинаковые цвета в идущих подряд пикселях нужно объединять в один элемент.
2) Вместо div лучше взять что-то покороче, b или i.
3) Конвертировать нужно не JPG, иначе много шума и первый пункт будет без толку.
4) RGB(255,255,255) длинее, чем #fff.
5) Gzip! Gzip! Gzip!

[@d0lfin]

> 4) RGB(255,255,255) длинее, чем #fff.
еще рациональнее сделать цсску с каким-нибудь классом
.w{
background: #fff
}

[@homm]

Один преобладающий цвет можно вынести в background родителя.

[@Masterkey]

после того как сервер ляжет я думаю все это сделается )))

ЗЫ забавно но ФФ быстрее отрисовал ЭТО на неакктивной вкладе, чем на активной *SCRATCH*

[@spanishgipsy]

Это логично, ведь он не дёргает дерево и не перерисовывает каждый раз

[@BANTIK]

Спасибо, я примерно такие же действия думал проделать.
1)Попробую продумать более эффективный алгоритм оптимизации
2)div на i или b — думал об этом, но экономию в 4 символа сначала посчитал незначительной, но практика показала что стоит это применить.
3)Спасибо, об этом не думал.
4)думал, но чтобы получить 6-ти значный hex каждый раз надо вызывать функцию по преобразованию rgb в hex — и я решил сервер пожалеть. Но вообще попробую.
5)Тоже хороший совет, спасибо!

[@homm]

Она у вас каждый раз чтоли генерируется? А кеширование?

[@BANTIK]

Ну пока все вообще допотопно — для чистоты эксперимента, но прочитав все комменты, думаю надо сделать продвинутую версию, на этот раз чтобы не пределы браузеров оценивать, а чтобы получить более менее приемлемый результат по размеру файла и скорости его загрузки.

[@Masterkey]

это видимо нагрузочное тестирование железа )))

[@sic]

Исходный код страницы на FF 3.6 так долго грузился, что я не поленился уйти заваривать чай.

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

А вообще, забавно.

[@Agent_Smith]

у меня грузился секунды 2.

[@abarmot]

Еще при оптимизации можно использовать цвет бордера.

Даже какой-то спортивный азарт появился — во сколько раз получиться уменьшить код ))

[@abarmot]

еще, как уже писали выше — вынести цсс
плюс к этому использовать разные односимвольные теги (a i b p u)

[@not_ice]

можно вообще отказаться от кодирования цветов через параметр style, прописать палитру в css и использовать классы — так код сократится почти вдвое.
также можно жать хтмл-код gzipом :)

хмм, еще можно подумать об альфа-канале ))

[@mr_fresh]

Любой «экстрим» помогает узнать границы технологии.
Я не ожидал, что такой относительно небольшой файл будет так тормозить.
Он notepad'ом++ открывается еле-еле (~816KB). А другой файлик (~9,6MB) просто летает в нем.
Может быть попробовать дивы выводить не в одну строку?

[@ppiskun]

Спасибо, вы подвесили мой нетбук на 2 минуты

[@MaRio]

а ты попробуй ещё это файербагом посмотреть ;)

[@ppiskun]

Пожалуй, я не буду этого делать

[@Masterkey]

товарищи!
зато мы теперь все знаем зачем нам нужны 128 ядерные процессоры! )))

[@anyxem]

рано или поздно, обычно очень поздно (под утро), такие идеи приходят каждому =) но реализовать не у всех хватает нервов, или просто вовремя задают себе вопрос «Зачем? Лучше спать пойду»

[@valeron]

Вашу б энергию, да в мирное русло… :)

[@BANTIK]

Кстати, если теоретически прикинуть, взять мощный сервер, добавить javascript, то можно даже на анимацию замахнуться или даже на видео… Но реализацию этой задумки, я думаю, надо отложить пока лет на 5)))

[@valeron]

Действительно, зачем нам тег <video>, какой-то HTML5.
Мы в лоб джаваскриптом видео реализeзуем )))

[@GoshaTobolsky]

Поэтому нас русских никогда не победить! :)

[@Crazybot]

У вас после 5, ноль в скобку превратился кажись…

[@GoshaTobolsky]

Свежая аццкая идея: можно делать на этой основе капчи! :D

[@Psih]

Я уже автору в личку это предложил, даже посильную помощь :)

А что автору нужно сделать, так это каждый див на новую строку поставить. Это будет куда легче для редакторов :)

[@lorc]

Да ну. Берусь написать за полчаса скрипт, который не основе тех div'ов будет генерить растровую картинку обратно.
Более того, для успешного машинного распознавания капчи цвета не обязательно должны быть такие, как в оригинале. Поэтому можно спокойно забить на то, что часть цветов будет описана в CSS

[@GoshaTobolsky]

есть впечатление, что кто-то слишком серьезно воспринял данную идею :)

[@lorc]

я то — нет :)
А вот товарищ выше уже предлагал помощь автору топика в написании такой капчи :)

[@GoshaTobolsky]

ну тада мир, дружба, жвачка :D

[@Masterkey]

тогда ждем нового стартапа!

[@homm]

желательно чтобы это был Chrome, он точно справится.

У меня, кстати, в хроме открывается намного медленнее, чем в Опере. Еще и глючить при изменении масштаба страницы.

[@SerJook]

А разве с использованием таблицы работать быстрее не будет?

[@Mithgol]

Firefox 3.6, всё хорошо, но опосля закрытия вкладки сборщик мусора собирает долго.

[@desterman]

Перенесите в Я безумный =)

[@gabriell]

Перенесите в Информационная Безопасность — это же готовый эксплоит для Firefox )

[@AndrewTishkin]

при помощи php и библиотеке GD2

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

пробегаем по всем его пикселя

Афтар скушал букву

узнаем код цвет

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

такойже
наслождаться

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

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

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

PS: топику поставил минус, но за полученное мной удовольствие (от разбора текста по винтикам) ставлю в карму плюс. С искренней надеждой не увидеть больше такого на Хабре )))

[@kastaneda]

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

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

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

раз ты такой граммар-наци, че ж ты «автора» коверкаешь?

[@AndrewTishkin]

Ни рыба ни мясо

Вот примерно именно это я и хотел выразить ;)
Хоть один человек понял :)

[@AndrewTishkin]

Это было не коверканье. А тонкий намёк на толстые обстоятельства. Вам не понять

[@kastaneda]

хреново потому что намекаешь может быть?
а то, что щас заявляешь, что публично с издевкой обращался к автору топика, то ты вдвойне мудак.
ты там снизу ответил:

А теперь, пожалуйста, огласите мои ошибки. Публично, я разрешаю :))) Заинтриговали, серьёзно

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

[@AndrewTishkin]

публично с издевкой

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

у тебя по ходу совсем все плохо с головой

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

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

PS: ах да. Минусуйте, минусуйте, я из принципа не буду ставить Вам минус в карму
PPS: если надумаете давать ответный комментарий, не забудьте указать свою дату рождения. Интересно же. Я так вот хоть и «мудак», а не скрываю данную информацию. Вы же вешаете таблички на других, скрывая сведения о себе
PPPS: и тыкать мне тоже не надо, мы с вами на брудершафт не пили. В связи с этим «тыканьем» мне тем более интересно узнать Ваш возраст

[@kastaneda]

ты такой пафосный

[@BANTIK]

Зато я наелся! Жалко, что не вы были моим учителем в школе; столь доходчивые объяснения, я уверен, принесли бы мне куда больше пользы!

[@dinamyte]

Вы бы сначала на свои ошибки обратили внимание, чтобы потом стыдно не было. О таких вещах, к слову, принято писать лично автору.

[@AndrewTishkin]

А теперь, пожалуйста, огласите мои ошибки. Публично, я разрешаю :))) Заинтриговали, серьёзно
(«афтар» не в счёт, я это слово прокомментировал чуть выше)

В личку я пишу, вместо того чтобы предавать опечатки публичной огласке (да-да, поверьте), но не всегда. Данный случай был слишком тяжёлым и поэтому я решился на более болезненную процедуру, предвидя весь поток критики в мой адрес

[@kolpeex]

Ну, за примером далеко ходить не надо — www.thematicmedia.ru/

[@kasus]

Можно круто сократить, если сделать картинку в виде json массива с цветами в hex, а потом с помощью javascripta выводить.

[@nsinreal]

Какая хорошая капча.

[@suglosta]

Новый шаг к созданию векторного гипертекстового самизнаетекого? :)
Вообще круто, жаль что сравнительно долго грузиться.

[@stas_ik]

Хм… А если это использовать при оптимизации загрузки страницы сделав в таком виде, к примеру, иконки 16x16px? Меньше запросов к серверу — быстрее грузится страница

[@BANTIK]

Если я правильно посчитал:
минимальный — видимо это наименьший возможный размер кода для одного пикселя, если не рассматривать вариант с объединением в один блок одинаковых цветов, то 17 символов (в UTF) умножим дважды на 16 — получим 4352 байта для одной иконки. При этом, картинка, даже в PNG, весить будет около 450-500 байт.

[@BANTIK]

так, HTML съелся. Вот что хотел написать — {р class=«a»}{/р} — видимо это наименьший возможный размер кода

[@homm]

<p class="a"> — достаточно. P можно не закрывать (черт, как я сам не додумался выше порекомендовать p :)

[@stas_ik]

А если оптимизировать как тут предлагали?
-задать класс
-использовать тэги короче
-объединить близлежащие дивы
-цвета перевести в HEX

[@stas_ik]

или даже не class, а id

[@BANTIK]

Ну id точно нет, т.к. для иконок 16X16, в рамках одного дизайна, впринципе можно выделить каждый цвет в отдельный однобуквенный класс, и потом использовать повторно. А id — это для каждого пикселя (читай блока) нужен будет свой класс, что повлечет за собой еще css-ину куда большего размера.

[@stas_ik]

Хм… А разве #w {background:#fff;} не имеет место быть?

[@BANTIK]

ну так элемент с ID «w» может быть только один на странице. Поэтому, в лучшем случае, css получиться примерно таким #w1, #w2, #3 {background:#fff;}. А если мы создадим просто класс .w{background:#fff;} и для всех белых пикселей будет указывать его, то это даст большую экономию, если рассматривать итоговый результат.

[@stas_ik]

Пожалуй, да.
А если вернуться к вопросу оптимизации страницы и предположить, что наши иконки имеют, в основном, одну цветовую гамму то тут можно добиться экономии в размерах (не только в запросах на сервер). Такой способ можно использовать наряду с тем, который предлагают на webo.in
Попробовать бы конвертер на примерах…

[@DjOnline]

Боже мой! Зачем изобретать уже существующий велосипед?
ru.wikipedia.org/wiki/Data:_URL
webo.in/articles/habrahabr/46-cross-browser-data-url/

p.s. почему то не работают здесь html тэги.

[@stas_ik]

Data:_URL не очень дружит c IE.
К тому же можно большую часть изображения разместить в css, а значит для него будет доступно кэширование

[@DjOnline]

Так я же привёл вторую ссылку, там workaround для IE.
Это уже промышленное и экономичное решение, используется в duris.ru, web optimizer.
Для небольших иконок и прозрачных гифов самое то.

[@BANTIK]

Кстати, в тему про капчи, можноли с помощью php генерить анимированный gif? Если можно, тогда надо сделать чтобы символы в капчи появлялись поочередно. Причем скорость появления была различной.

[@homm]

Причем скорость появления была различной.

Да, вот это точно обескуражит электронный мозг. «Как это с разной скоростью», подумает он и откажется распознавать.

[@stas_ik]

А еще такие картинки должны отображаться даже если в браузере выключен показ изображений

[@BANTIK]

Ну картинки отключают чтобы трафик экономить, а такой способ явно этому не содействует. Лучше классическая замена на текст.

[@sgnppv]

А можно как-то покомпактней такой код сделать? Штука-то хорошая, для использования в качестве подставления ОЧЕНЬ нужной на сайте картинки — может и пригодиться.

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

[@stansult]

почти офтопик — я бы поменял тэг html-вёрска на html-вёрстка

[@sergey_privacy]

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