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

Прямо перед тем, как я начал работать с Flatiron, я подумал, почему бы не очистить его от пыли и не отправить в качестве практики? Я потратил около недели на его доводку, прежде чем Facebook закрыл Instagram API и разбил мои мечты.

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

Я решил, что вместо развертывания напишу это объяснение того, как работает приложение. Вы можете скачать, получить ключ разработчика и попробовать на себе здесь.

Что делает Selfie Mood Ring?

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

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

Наконец, мы собираемся назвать каждый из этих цветов с помощью API присвоения названий цветов.

Вот как выглядит мой цвет после того, как он прошел этот процесс:

Получение сообщений из Instagram

Первый трюк - получить доступ к Instagram и получить сообщения с помощью их API.

Создаем аккаунт-песочницу и получаем API-ключ. Если бы я не упомянул об этом раньше, они полностью заблокируют это к концу следующего года. Практически любой веб-сайт с фидом в Instagram в 2019 году выйдет из строя.

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

$(function() {
var fragmentString = location.hash.substr(1);
   var fragment = {};
   var fragmentItemStrings = fragmentString.split('&');
   for (var i in fragmentItemStrings) {
     var fragmentItem = fragmentItemStrings[i].split('=');
     if (fragmentItem.length !== 2) {
       continue;
     }
}
var feed = new Instafeed({
        get: 'user',
    userId :  'self',
        accessToken: fragmentItem[1],
    limit: '60',
    resolution: "low_resolution",
    after: showColors
    });
feed.run();
});

API Instagram предоставляет вам два варианта получения токена доступа: на стороне сервера или в URL-адресе. URL проще. Приведенный выше код получает этот токен, захватывая URL-адрес страницы и разделяя его. Получив фрагмент, мы можем передать его в функцию Instafeed.

Бум, теперь у нас есть до 60 изображений (хотя песочница ограничена 20).

Поиск доминирующих цветов

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

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

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

$( “a” ).each(function() {
 var a = $(this);
 var img = new Image();
 img.onload = function () {
context.drawImage(img, x+=320, 0);
var rgb = new ColorFinder(hue).getMostProminentColor(img);

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

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

Вы также можете заметить, что он запускается через 6 секунд. Мы собирались исправить это позже, но потом Цукерберг разбил наши мечты, хорошо?

setTimeout(function(){
   var rgb2 = new ColorFinder(hue).getMostProminentColor(canvas);
console.log(rgb2);
$('html').css("background-color", 'rgb('+rgb2.r+','+rgb2.g+','+rgb2.b+')');
$('#colorSq').css("background-color", 'rgb('+rgb2.r+','+rgb2.g+','+rgb2.b+')');
$('button').css("background-color", 'rgb('+rgb2.r+','+rgb2.g+','+rgb2.b+')');
$('#hex').append(`<p>HEX: #${rgbToHex(rgb2)}</p>`)
$('#rgb').append(`<p>RGB: ${rgb2.r}, ${rgb2.g}, ${rgb2.b}</p>`)
 $.ajax({
        url: 'http://www.colourlovers.com/api/color/'+rgbToHex(rgb2),
        dataType:'jsonp',
        data: {
            format: 'json',
        },
        jsonp: 'jsonCallback',
        success: function(data){
            $('#myColor').append(`<h1>${data[0].title}</h1>`);
}
    });
}, 6000);

Называя цвета

Существует несколько API-интерфейсов для присвоения цветов, но мы выбрали Color Lovers, потому что у них очень странные названия. Например, # FFFFF2 называется Nose Candy. Фантастика.

С API Color Lovers довольно просто работать, все, что нам нужно сделать, это передать шестнадцатеричный цвет для всех наших доминирующих цветов, и мы получаем аккуратную небольшую запись JSON, рассказывающую нам все о нашем цвете.

В приведенном ниже коде вы можете увидеть тот же самый заметный цветовой код, что и ранее, и где мы добавляем цветной фон для каждого изображения. Затем мы берем имя из Color Lovers API и добавляем это имя в качестве подзаголовка.

var rgb = new ColorFinder(hue).getMostProminentColor(img);
a.css("background-color", 'rgb('+rgb.r+','+rgb.g+','+rgb.b+')');
$.ajax({
        url: 'http://www.colourlovers.com/api/color/'+rgbToHex(rgb),
        dataType:'jsonp',
        data: {
            format: 'json',
        },
        jsonp: 'jsonCallback',
        success: function(data){
            a.append(`<h3>${data[0].title}</h3>`);
}
    });

Вот пример того, что возвращает API, прежде чем мы конвертируем его в JSON: http://www.colourlovers.com/api/color/fffff2

А вот как это выглядит, когда выплевывают:

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

Скачивание вашего цветового блока

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

В идеале это позволило бы вам загружать цвет на свой телефон при просмотре на мобильном телефоне, чтобы затем вы могли поделиться своим цветом в Instagram, но iOS не позволяет вам это делать.

Я не осознавал этого, пока не создал эту функцию с помощью html2canvas. 😖

Как это работает? html2canvas берет div вашего цветового квадрата, создает холст, преобразует его в jpeg, а затем создает ссылку для загрузки и прикрепляет ее к кнопке Сохранить цвет. Когда вы щелкаете по нему, вы загружаете свой цветной квадрат как selfie-mood.jpg.

$('#download-jpg').click(function(){
    html2canvas($('#colorSq'),
    {
      onrendered: function (canvas) {
        var a = document.createElement('a');
        // toDataURL defaults to png, so we need to request a jpeg, then convert for file download.
        a.href = canvas.toDataURL("image/jpeg").replace("image/jpeg", "image/octet-stream");
        a.download = 'selfie-mood.jpg';
        a.click();
      }
    });
  });

Ключевые выводы

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

Предположим, что каждый API временный.