GetPixels - создание восьмибитных изображений

[Sergio86]

Всем привет!
В выходные написал одностраничный сайт и выложил его в интернет.
http://getpixels.ru/
Если кратко, то на нем можно без регистрации создавать и сохранять "восьмибитные" изображения (PNG or GIF), а также сохранять свои работы в адресной строке, а потом к ним возвращаться, или делиться ссылками.
Пример работы Марио

Edited August 18, 2015 by Sergio86

[DivMan]

http://getpixels.ru/#{"margin":"1","width":"18","count":"30","color_margin":"#d9d9d9","color_defult_elements":"#ffffff","color_user_elements":"#ff0000","elements":{"_12_0":"#ff0000","_11_0":"#ff0000","_10_0":"#ff0000","_9_0":"#ff0000","_8_0":"#ff0000","_7_0":"#ff0000","_6_0":"#ff0000","_5_0":"#ff0000","_4_0":"#ff0000","_3_0":"#ff0000","_2_0":"#ff0000","_1_0":"#ff0000","_0_0":"#ff0000","_0_1":"#ff0000","_0_2":"#ff0000","_0_4":"#ff0000","_0_3":"#ff0000","_0_5":"#ff0000","_0_6":"#ff0000","_0_7":"#ff0000","_0_8":"#ff0000","_0_9":"#ff0000","_0_10":"#ff0000","_0_11":"#ff0000","_0_12":"#ff0000","_0_13":"#ff0000","_0_14":"#ff0000","_0_15":"#ff0000","_0_16":"#ff0000","_0_17":"#ff0000","_0_18":"#ff0000","_0_19":"#ff0000","_0_20":"#ff0000","_0_21":"#ff0000","_0_22":"#ff0000","_0_23":"#ff0000","_0_24":"#ff0000","_0_25":"#ff0000","_0_26":"#ff0000","_0_27":"#ff0000","_0_28":"#ff0000","_0_29":"#ff0000","_1_29":"#ff0000","_2_29":"#ff0000","_3_29":"#ff0000","_13_0":"#ff0000","_14_0":"#ff0000","_15_0":"#ff0000","_16_0":"#ff0000","_17_0":"#ff0000","_18_0":"#ff0000","_19_0":"#ff0000","_20_0":"#ff0000","_21_0":"#ff0000","_22_0":"#ff0000","_23_0":"#ff0000","_24_0":"#ff0000","_25_0":"#ff0000","_26_0":"#ff0000","_27_0":"#ff0000","_28_0":"#ff0000","_29_0":"#ff0000","_4_29":"#ff0000","_5_29":"#ff0000","_6_29":"#ff0000","_7_29":"#ff0000","_8_29":"#ff0000","_9_29":"#ff0000","_10_29":"#ff0000","_11_29":"#ff0000","_12_29":"#ff0000","_13_29":"#ff0000","_14_29":"#ff0000","_15_29":"#ff0000","_16_29":"#ff0000","_17_29":"#ff0000","_18_29":"#ff0000","_19_29":"#ff0000","_20_29":"#ff0000","_21_29":"#ff0000","_22_29":"#ff0000","_23_29":"#ff0000","_24_29":"#ff0000","_25_29":"#ff0000","_26_29":"#ff0000","_27_29":"#ff0000","_28_29":"#ff0000","_29_29":"#ff0000","_29_28":"#ff0000","_29_27":"#ff0000","_29_26":"#ff0000","_29_25":"#ff0000","_29_24":"#ff0000","_29_23":"#ff0000","_29_22":"#ff0000","_29_21":"#ff0000","_29_20":"#ff0000","_29_19":"#ff0000","_29_18":"#ff0000","_29_17":"#ff0000","_29_16":"#ff0000","_29_15":"#ff0000","_29_14":"#ff0000","_29_13":"#ff0000","_29_12":"#ff0000","_29_11":"#ff0000","_29_10":"#ff0000","_29_9":"#ff0000","_29_8":"#ff0000","_29_7":"#ff0000","_29_6":"#ff0000","_29_5":"#ff0000","_29_4":"#ff0000","_29_3":"#ff0000","_29_2":"#ff0000","_28_2":"#ff0000","_27_2":"#ff0000","_26_2":"#ff0000","_25_2":"#ff0000","_24_2":"#ff0000","_23_2":"#ff0000","_21_2":"#ff0000","_20_2":"#ff0000","_16_2":"#ff0000","_22_2":"#ff0000","_19_2":"#ff0000","_18_2":"#ff0000","_17_2":"#ff0000","_15_2":"#ff0000","_14_2":"#ff0000","_13_2":"#ff0000","_12_2":"#ff0000","_11_2":"#ff0000","_10_2":"#ff0000","_9_2":"#ff0000","_8_2":"#ff0000","_7_2":"#ff0000","_6_2":"#ff0000","_5_2":"#ff0000","_4_2":"#ff0000","_3_2":"#ff0000","_2_2":"#ff0000","_2_3":"#ff0000","_2_4":"#ff0000","_2_5":"#ff0000","_2_6":"#ff0000","_2_7":"#ff0000","_2_8":"#ff0000","_2_9":"#ff0000","_2_10":"#ff0000","_2_11":"#ff0000","_2_12":"#ff0000","_2_13":"#ff0000","_2_14":"#ff0000","_2_15":"#ff0000","_2_16":"#ff0000","_2_17":"#ff0000","_2_18":"#ff0000","_2_19":"#ff0000","_2_20":"#ff0000","_2_21":"#ff0000","_2_22":"#ff0000","_2_23":"#ff0000","_2_24":"#ff0000","_2_25":"#ff0000","_2_26":"#ff0000","_2_27":"#ff0000","_3_27":"#ff0000","_4_27":"#ff0000","_5_27":"#ff0000","_6_27":"#ff0000","_7_27":"#ff0000","_8_27":"#ff0000","_9_27":"#ff0000","_10_27":"#ff0000","_11_27":"#ff0000","_12_27":"#ff0000","_13_27":"#ff0000","_14_27":"#ff0000","_15_27":"#ff0000","_16_27":"#ff0000","_17_27":"#ff0000","_18_27":"#ff0000","_19_27":"#ff0000","_20_27":"#ff0000","_21_27":"#ff0000","_22_27":"#ff0000","_23_27":"#ff0000","_24_27":"#ff0000","_25_27":"#ff0000","_26_27":"#ff0000","_27_27":"#ff0000","_27_26":"#ff0000","_27_25":"#ff0000","_27_24":"#ff0000","_27_23":"#ff0000","_27_22":"#ff0000","_27_21":"#ff0000","_27_20":"#ff0000","_27_19":"#ff0000","_27_18":"#ff0000","_27_17":"#ff0000","_27_16":"#ff0000","_27_15":"#ff0000","_27_14":"#ff0000","_27_13":"#ff0000","_27_12":"#ff0000","_27_11":"#ff0000","_27_10":"#ff0000","_27_9":"#ff0000","_27_8":"#ff0000","_27_7":"#ff0000","_27_6":"#ff0000","_27_5":"#ff0000","_27_4":"#ff0000","_26_4":"#ff0000","_25_4":"#ff0000","_24_4":"#ff0000","_23_4":"#ff0000","_22_4":"#ff0000","_21_4":"#ff0000","_20_4":"#ff0000","_19_4":"#ff0000","_18_4":"#ff0000","_17_4":"#ff0000","_16_4":"#ff0000","_15_4":"#ff0000","_14_4":"#ff0000","_13_4":"#ff0000","_12_4":"#ff0000","_11_4":"#ff0000","_10_4":"#ff0000","_9_4":"#ff0000","_8_4":"#ff0000","_7_4":"#ff0000","_6_4":"#ff0000","_5_4":"#ff0000","_4_4":"#ff0000","_4_5":"#ff0000","_4_6":"#ff0000","_4_7":"#ff0000","_4_8":"#ff0000","_4_9":"#ff0000","_4_10":"#ff0000","_4_11":"#ff0000","_4_12":"#ff0000","_4_13":"#ff0000","_4_14":"#ff0000","_4_15":"#ff0000","_4_16":"#ff0000","_4_17":"#ff0000","_4_18":"#ff0000","_4_19":"#ff0000","_4_20":"#ff0000","_4_21":"#ff0000","_4_22":"#ff0000","_4_23":"#ff0000","_4_24":"#ff0000","_4_25":"#ff0000","_5_25":"#ff0000","_6_25":"#ff0000","_7_25":"#ff0000","_8_25":"#ff0000","_9_25":"#ff0000","_10_25":"#ff0000","_11_25":"#ff0000","_12_25":"#ff0000","_13_25":"#ff0000","_14_25":"#ff0000","_15_25":"#ff0000","_16_25":"#ff0000","_17_25":"#ff0000","_18_25":"#ff0000","_19_25":"#ff0000","_20_25":"#ff0000","_21_25":"#ff0000","_22_25":"#ff0000","_23_25":"#ff0000","_24_25":"#ff0000","_25_25":"#ff0000","_25_24":"#ff0000","_25_23":"#ff0000","_25_22":"#ff0000","_25_21":"#ff0000","_25_20":"#ff0000","_25_19":"#ff0000","_25_18":"#ff0000","_25_17":"#ff0000","_25_16":"#ff0000","_25_15":"#ff0000","_25_14":"#ff0000","_25_13":"#ff0000","_25_12":"#ff0000","_25_11":"#ff0000","_25_10":"#ff0000","_25_9":"#ff0000","_25_8":"#ff0000","_25_7":"#ff0000","_25_6":"#ff0000","_24_6":"#ff0000","_23_6":"#ff0000","_22_6":"#ff0000","_21_6":"#ff0000","_20_6":"#ff0000","_19_6":"#ff0000","_18_6":"#ff0000","_17_6":"#ff0000","_16_6":"#ff0000","_15_6":"#ff0000","_14_6":"#ff0000","_13_6":"#ff0000","_12_6":"#ff0000","_11_6":"#ff0000","_10_6":"#ff0000","_9_6":"#ff0000","_8_6":"#ff0000","_7_6":"#ff0000","_6_6":"#ff0000","_6_7":"#ff0000","_6_8":"#ff0000","_6_9":"#ff0000","_6_10":"#ff0000","_6_11":"#ff0000","_6_12":"#ff0000","_6_13":"#ff0000","_6_14":"#ff0000","_6_15":"#ff0000","_6_16":"#ff0000","_6_17":"#ff0000","_6_18":"#ff0000","_6_19":"#ff0000","_6_20":"#ff0000","_6_21":"#ff0000","_6_22":"#ff0000","_6_23":"#ff0000","_7_23":"#ff0000","_8_23":"#ff0000","_9_23":"#ff0000","_10_23":"#ff0000","_11_23":"#ff0000","_12_23":"#ff0000","_13_23":"#ff0000","_14_23":"#ff0000","_15_23":"#ff0000","_16_23":"#ff0000","_17_23":"#ff0000","_18_23":"#ff0000","_19_23":"#ff0000","_20_23":"#ff0000","_21_23":"#ff0000","_22_23":"#ff0000","_23_23":"#ff0000","_23_22":"#ff0000","_23_21":"#ff0000","_23_20":"#ff0000","_23_19":"#ff0000","_23_18":"#ff0000","_23_17":"#ff0000","_23_16":"#ff0000","_23_15":"#ff0000","_23_14":"#ff0000","_23_13":"#ff0000","_23_12":"#ff0000","_23_11":"#ff0000","_23_10":"#ff0000","_23_9":"#ff0000","_23_8":"#ff0000","_22_8":"#ff0000","_21_8":"#ff0000","_20_8":"#ff0000","_19_8":"#ff0000","_18_8":"#ff0000","_17_8":"#ff0000","_16_8":"#ff0000","_15_8":"#ff0000","_14_8":"#ff0000","_13_8":"#ff0000","_12_8":"#ff0000","_11_8":"#ff0000","_9_8":"#ff0000","_10_8":"#ff0000","_8_8":"#ff0000","_8_9":"#ff0000","_8_10":"#ff0000","_8_11":"#ff0000","_8_12":"#ff0000","_8_13":"#ff0000","_8_14":"#ff0000","_8_15":"#ff0000","_8_18":"#ff0000","_8_17":"#ff0000","_8_16":"#ff0000","_8_19":"#ff0000","_8_20":"#ff0000","_8_21":"#ff0000","_9_21":"#ff0000","_10_21":"#ff0000","_11_21":"#ff0000","_12_21":"#ff0000","_13_21":"#ff0000","_15_21":"#ff0000","_14_21":"#ff0000","_16_21":"#ff0000","_17_21":"#ff0000","_18_21":"#ff0000","_19_21":"#ff0000","_20_21":"#ff0000","_21_21":"#ff0000","_21_20":"#ff0000","_21_19":"#ff0000","_21_18":"#ff0000","_21_17":"#ff0000","_21_16":"#ff0000","_21_15":"#ff0000","_21_14":"#ff0000","_21_13":"#ff0000","_21_12":"#ff0000","_21_11":"#ff0000","_21_10":"#ff0000","_20_10":"#ff0000","_18_10":"#ff0000","_19_10":"#ff0000","_17_10":"#ff0000","_16_10":"#ff0000","_15_10":"#ff0000","_14_10":"#ff0000","_13_10":"#ff0000","_12_10":"#ff0000","_11_10":"#ff0000","_10_10":"#ff0000","_10_11":"#ff0000","_10_12":"#ff0000","_10_13":"#ff0000","_10_14":"#ff0000","_10_15":"#ff0000","_10_16":"#ff0000","_10_17":"#ff0000","_10_18":"#ff0000","_10_19":"#ff0000","_11_19":"#ff0000","_12_19":"#ff0000","_13_19":"#ff0000","_14_19":"#ff0000","_15_19":"#ff0000","_16_19":"#ff0000","_17_19":"#ff0000","_18_19":"#ff0000","_19_19":"#ff0000","_19_18":"#ff0000","_19_17":"#ff0000","_19_16":"#ff0000","_19_15":"#ff0000","_19_14":"#ff0000","_19_13":"#ff0000","_19_12":"#ff0000","_18_12":"#ff0000","_17_12":"#ff0000","_16_12":"#ff0000","_15_12":"#ff0000","_14_12":"#ff0000","_13_12":"#ff0000","_12_12":"#ff0000","_12_13":"#ff0000","_12_14":"#ff0000","_12_15":"#ff0000","_12_16":"#ff0000","_12_17":"#ff0000","_13_17":"#ff0000","_14_17":"#ff0000","_15_17":"#ff0000","_16_17":"#ff0000","_17_17":"#ff0000","_17_16":"#ff0000","_17_15":"#ff0000","_17_14":"#ff0000","_16_14":"#ff0000","_15_14":"#ff0000","_14_14":"#ff0000","_14_15":"#ff0000","_15_15":"#ff0000","_16_15":"#ff0000"},"user_elements":{}}

Edited August 18, 2015 by DivMan

[sigma77]

1. Неплохо бы реализовать рисование с зажатой клавишей мыши.

2. Когда быстро щелкаешь, значительная часть щелчков не отрабатывается ожидаемым образом

3. С выбором цвета вообще какая-то не понятная чехорда. Как работает совсем не понятно. 

[Sergio86]

1. Неплохо бы реализовать рисование с зажатой клавишей мыши.

2. Когда быстро щелкаешь, значительная часть щелчков не отрабатывается ожидаемым образом

3. С выбором цвета вообще какая-то не понятная чехорда. Как работает совсем не понятно. 

1) Это будет лишним

2) Странно, может кликаете не по дивам?

3) Решено) Теперь я думаю, все стало более понятным и приятным для работы)

[lexxcode]

Что-то у меня ничего не рисуется там.

[Sergio86]

Что-то у меня ничего не рисуется там.

Возможно используете устаревший браузер

[lexxcode]

да мой Google Chrome Version 44.0.2403.155 m (64-bit) совсем старый, но новее не дают

[Sergio86]

да мой Google Chrome Version 44.0.2403.155 m (64-bit) совсем старый, но новее не дают

я лишь высказал предположение и не более того

На моем древнем 37.0.2062.120 все работает

[antonKar]

1) Это будет лишним

Для непоклонников Майнкрафта лишним точно не будет. 

[wwt]

Хранить данные в ссылке, длина которой не известна заранее, не очень гуд. Вот почитайте https://github.com/dreikanter/paradigm.ru/blob/master/posts/2007-12-19_url-max-length.md

 

И как минимум прикрутите к сайту какой-нибудь сервис сокращения ссылок типо https://goo.gl/

[Sergio86]

Хранить данные в ссылке, длина которой не известна заранее, не очень гуд. Вот почитайте https://github.com/dreikanter/paradigm.ru/blob/master/posts/2007-12-19_url-max-length.md

 

И как минимум прикрутите к сайту какой-нибудь сервис сокращения ссылок типо https://goo.gl/

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

Но в любом случае спасибо за проявленный интерес

[wwt]

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

 

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

[Sergio86]

Нужно думать. Хотя мысль напрашивается сама собой: сделать добровольную регистрацию, оставив при этом и гостевой режим)

[Great Rash]

Оригинальная мысль - хранить JSON в URL... Регистрируйте юзера, используя oAuth, и храните изображения в базе. Ну или хоть в base64 кодируйте, всё же короче получится.

[wwt]

Нужно думать. Хотя мысль напрашивается сама собой: сделать добровольную регистрацию, оставив при этом и гостевой режим)

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

А вообще можно просто хранить пары "ссылка=данные"

[Sergio86]

Оригинальная мысль - хранить JSON в URL... Регистрируйте юзера, используя oAuth, и храните изображения в базе. Ну или хоть в base64 кодируйте, всё же короче получится.

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

 

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

потом сможет пригодиться

[nerv]

В выходные написал одностраничный сайт и выложил его в интернет.

вау, ничего себе! Да ты крутой!

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

<!DOCTYPE html><html><head>    <meta charset=utf-8" /></head><body>тру-ля-ля</body></html>

1. Неплохо бы реализовать рисование с зажатой клавишей мыши.

ему уже на двух ресурсах об этом говорят, но д'артаньяну виднее)

 

Что-то у меня ничего не рисуется там.

первое впечатление аналогичное

Озвучу простую истину: "посмотри правде в глаза: ты наговнокодил какую-то ерунду и при этом упираешься рогами в ворота, когда тебе матерые фронтендеры* в один голос указывают на недостатки и на то, что можно было бы улучшить"

*себя к ним не отношу

Какой же я добрый

[Sergio86]

Какой же я добрый

Это точно)

[Sergio86]

По просьбам страждущих и трудящихся - сделано

[Great Rash]

Да и base64 на выходе дает строку длиннее оригинала.

Не верю, чтоб base64 был длиннее чем JSON. 

[Sergio86]

 

Да и base64 на выходе дает строку длиннее оригинала.

Не верю, чтоб base64 был длиннее чем JSON. 

 

Думаю, этот сайт не врет, можно убедиться наглядно.

[Great Rash]

Так надо не JSON перегонять в base64, а получившуюся картинку.

[Sergio86]

Так надо не JSON перегонять в base64, а получившуюся картинку.

В ссылке находится не картинка, а данные для ее генерации: цвета, и тд, которыми можно управлять. Картинка получается если нажать на кнопку "Получить изображение". Из одной ссылки можно сделать несколько картинок (разного размера, цветов и тд)

А картинку гонять по ссылке в base64, конечно, можно, но вряд ли кому нужно.

[Great Rash]

Данные для картинки (сюрприз!) можно брать из самой картинки.

[Sergio86]

Это как же? Парсить PNG или GIF?