Извлечение цвета темы

JavaScript Vue.js

Когда я делал музыкальное веб-приложение, меня поразил интерфейс воспроизведения локального музыкального проигрывателя (Qing Ting) Tencent (как показано на рисунке ниже), поэтому я решил «скопировать» его.

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

Затем представьте несколько js-плагинов для извлечения цвета.

1.rgbaster.js

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

использовать

В первую очередь необходимо ввести его, а затем код

const img = document.querySelector('img');
// 或者
// const img = 'http://example.com/image.jpg';
RGBaster.colors(img, {
     // 调色板大小，就是提取的样本，越大越精确，同时性能越差
     paletteSize: 30,
     // 颜色排除
     exclude: [ 'rgb(255,255,255)', 'rgb(0,0,0)' ],
     success: function(payload) {
        console.log('Dominant color:',payload.dominant);// 提取出来的主色
        console.log('Secondary color:', payload.secondary);// 次色
        console.log('Palette:', payload.palette); // 调色板
     }})

Извлеченный результат представляет собой значение rgb


Учащимся, которым нужно использовать значение rgba, просто нужно упорядочить его, извлечь, а затем соединить.

const c = payload.dominant.match(/\d+/g);
const Color = `rgba(${c[0]},${c[1]},${c[2]},0.8)`;

Цвет темный или светлый. Если он темный, черный шрифт нечетко виден. Цвет текста должен быть обратным цвету фона. Мы можем преобразовать значение RGB в значение серого, чтобы оценить глубину цвета.

let fontColor;
const grayLevel = c[0] * 0.299 + c[1] * 0.587 + c[2] * 0.114;
      if (grayLevel >= 192) {
        // 若为浅色，把文字设置为黑色
        fontColor = '#000';
      } else {
        fontColor = '#fff';
      }

Использую этот плагин в проекте, результат такой

播放界面
Интерфейс игры

Если вам интересен проект, нажмите здесь 👉адрес проекта

Наконец, я прикреплю вам еще два плагина для извлечения цвета.

2.Color Thief

адрес проекта

использовать
// 提取主色
const img = document.querySelector('img');
var colorThief = new ColorThief();
    console.log(colorThief.getColor(img));
 }
// 调色板
var colorThief = new ColorThief();
colorThief.getPalette(sourceImage, 8);
результат

3.vibrant.js

Извлечение ярких цветов из изображения.
Vibrant.js — это порт JavaScript замечательного класса Palette из библиотеки поддержки Android.
адрес проекта

использовать
const img = document.querySelector('img');
var vibrant = new Vibrant(img);
    var swatches = vibrant.swatches()
    for (var swatch in swatches)
        if (swatches.hasOwnProperty(swatch) && swatches[swatch])
            console.log(swatch, swatches[swatch].getHex())

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

В предварительном тесте цвет, извлеченный rgbaster, является наиболее близким, но в некоторых случаях отклонение в тесте немного далеко. А яркий.js в основном фокусируется на извлечении и классификации цветов изображений.Как показано в примере, результаты делятся на темные цвета, яркие цвета, выделяющиеся цвета и т. д. Лучше извлекать цвет темы или rgbaster.

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

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

Категории