Photoshop color picker на jQuery

    Недавно мне понадобилось в своём проекте реализовать выбор цвета, встал выбор использовать уже готовое решение или писать самому. Быстрый гуглопоиск не дал ни одной подходящей реализации. Было принято решение написать свой.




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

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

    Помимо jQuery придётся подключить jQuery UI разделы core, widget, mouse, slider. Подключение css и изображений от jQuery UI не требуется. Всё что нужно уже включено в colorPicker.css.

    GitHub
    Демо

    p.s. За код сильно не пинайте, программированием занимаюсь только в свободное время для своего удовольствия.
    Share post

    Similar posts

    AdBlock has stolen the banner, but banners are not teeth — they will be back

    More
    Ads

    Comments 29

      +5
      Полезный пост с ссылкой на GitHub и живым рабочим демо. Хабр еще торт.
        +2
        Диалогов выбора цвета на jqueryui пруд-пруди, в том числе и на хабре.
        Так что вы как то плохо искали, а так конечно молодцы!
          0
          Да, много, но всё что есть ни как не вписывалось в мой проект. В том числе и по приведённым вами ссылкам.
          +2
          Думаю, было бы полезно окно с шестнадцатиричным представлением цвета.
            +2
            Доступен метод getHEX(). При необходимости добавить к себе на страницу проекта поле, где будет отображаться HEX, не составит труда. Не стал лепить сразу т.к. не хочется перегружать лишними элементами.
              0
              На мой взгляд, окошко с шестнадцатиричным кодом цвета как-раз таки лишним и не будет. Краткое и удобное представление цвета. Даже если пользователю не нужно копировать код подобранного цвета, он ведь может захотеть задать цвет, в том числе и в hex-виде.
              Хотя, конечно, не зная особенностей вашего проекта, однозначно утверждать, что это упущение, нельзя :)
                0
                Аудитория моего проекта даже малейшего представления не имеет о том, что такое шестнадцатеричный цвет. Демо выложено на том же домене, что и сам проект. Хотя все кому было интересно уже посмотрели, яндекс.метрика зафиксировала довольно сильный всплеск посетителей после этой статьи.
            0
            Жаль, что картинка палитры внизу «захардкожена».
              0
              Делал скриншотом в png. Вроде не вижу разницы с оригиналом.
                0
                Только что открыл в двух окнах ту, что на сайте и скриншот из фотошопа без оптимизаций размера png. На IPS матрице не смог увидеть ни малейшей разницы, смотрел под увеличением, постоянно нажимая alt+tab. Изображения идентичны.
                  +1
                  Да не про это! Можно было бы построить изображение математически.
                  Вопрос, сколько бы это ресурсов заняло. Но всё же — оригинальнее, согласитесь :)

                  Это как верстать сайты из кусков скриншотов десктопных приложений.
                    0
                    Создать палитру динамически займёт минимум ресурсов. Только сходу не могу придумать алгоритм по которому строится именно такая же палитра. Надо посмотреть внимательно. Внести изменения дело десяти минут.
                      0
                      В Канвасе слева направо градиент из 8 контрольных точек, поверх градиент белый-прозрачный-чёрный.
                        0
                        По-моему, это просто боковая поверхность цилиндра HSL. Соответственно по горизонтальной оси — Hue, по вертикальной — Lightness.
                          0
                          Ну это если «правильно». А я предложил вариант «быстро» =)
                          0
                          Сделал динамическое создание палитры. Получилось чуть ярче, хотя так даже лучше.
                  –4
                  Не работает на IE7. :) Стоит посмотреть сюда.
                    +10
                    Ie7 не поддерживает canvas. Заниматься поддержкой устаревших браузеров не вижу ни какого смысла.
                      0
                      Везет вам, раз не видите смысла.
                      А вот у меня недавно один заказчик затребовал поддржку IE6, для своей интранет системы. По его словам этот бразуер их внутренний корпоротивный стандарт, и установка других брузеров недопустима, и это «Обсуждению не подлежит!!!». Я долго смеялся, но это была весьма крупная компания, и от такого проекта отказываться было глупо.
                      К счастью я добился совместимости за пару часов перелопатив JavaScript-ы, а вмеру перекосившийся дизайн интерфейсов их устроил.
                        0
                        Хорошо, что у меня за спиной нет заказчиков. Для своих целей писать всё же приятней. А делать поддержку ie8 и ниже в моём случае не только лень, но и бессмысленно.

                        Вот посещаемость за три недели, период конечно небольшой, но я не думаю, что со временем картина сильно изменится.
                        Два визита через ie8 и те скорее всего мои, через виртуальную машину.

                        Скриншот
                    +7
                    А я такой вот пикер сделал для последнего проекта, тоже на канвасе. Выложил в паблик, может, тоже кому пригодится…
                      0
                      Крутая штучка :) Одобрят!
                      –2
                      Дизайн этого пикера — унылое Г.
                        –4
                        Не знаю кому как, но лично мне было бы удобнее пользоваться стоковым диалогом…
                        input type = "color"
                          0
                          Ну вот что за идиотская манера молча сливать карму?
                          0
                          Тоже, как то давно, создавал свой колорпикер с выбором HSL, RGB, HEX и 2 квадратиками с выбранным цветом. Только цели создания были другие немного — нет jquery, есть IE7. В принципе дело не сложное.

                          Посмотрев код, думаю всё дело в начиналось как раз без фреймворков, так как, пользование document.getElementById(id) быстро превращается в $(id).

                          А такие функции как:
                          drawrCanvasR: function()
                          drawrCanvasG: function()
                          drawrCanvasB: function()
                          Я бы заменил на 1 функцию, менять код в 3х практически одинаковых функциях — скучное занятие.

                          Ну и самое наверно главное, 2 колорпикера на странице не будут работать. Точнее будет только один. Понятно дело, можно использовать один колорпикер на все случаи жизни, но не всегда удобно (аяксовые всплывашки, выбор цвета метки на карте и тд). Требуется точно знать, что уже скрипты колорпикера загружены или грузить их на каждой странице.
                            +1
                            Вы бы хоть попробовали ради интереса. На гитхабе как раз выложен пример, где на одной странице работают два колорпикера.
                              0
                              слона проглядел, id же. Этот пункт считаю недействительным :)
                                0
                                На счёт трёх почти одинаковых функций вы конечно же правы. Их вполне можно было бы объединить в одну. Но именно в данном случае от такого «упрощения» код стал бы только запутаннее. Хотя может мой скилл просто не позволяет это сделать по-нормальному.

                          Only users with full accounts can post comments. Log in, please.