Jump to content

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


Sergio86
 Share

Recommended Posts

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

Edited by Sergio86
Link to comment
Share on other sites

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 by DivMan
  • Like 2
Link to comment
Share on other sites

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

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

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

  • Like 1
Link to comment
Share on other sites

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

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

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

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

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

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

Link to comment
Share on other sites

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

 

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

  • Like 1
Link to comment
Share on other sites

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

 

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

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

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

Link to comment
Share on other sites

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

 

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

Link to comment
Share on other sites

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

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

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

Link to comment
Share on other sites

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

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

 

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

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

Link to comment
Share on other sites

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

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

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

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

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

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

 

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

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

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

:)

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

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

  • Like 1
Link to comment
Share on other sites

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

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

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

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy