Угловой 5, получить цвета с изображения

Question

У меня есть приложение для Android, которое использует android.support.v7.graphics.Palette, чтобы получить информацию о цвете из динамического изображения, а затем настроить макет действия, чтобы использовать измененные цвета из изображения. Мой вопрос, есть ли в Angular 5 что-то похожее? Я хочу смоделировать веб-версию этого проекта как можно ближе к версии для Android. Это будет означать динамическую настройку нескольких стилевых цветов после выбора изображения.

Обновление: я искал ColorThief() для JavaScript. Но я не уверен, как получить к нему доступ из компонента Angular 5.

Спасибо пк

Answer 1

Для тех, кто ищет что-то подобное, я использовал node-vibrant.js. Я запустил npm install и добавил файл в массив скриптов в файле angular.json

"scripts": [
  "node_modules/node-vibrant/dist/vibrant.min.js"
]

Затем я изменил свой файл tsconfig.json следующим образом:

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "allowSyntheticDefaultImports": true,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",
    "module": "commonjs",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2017",
      "dom"
    ]
  },
  "allowJs": true
}

Затем я импортировал Vibrant и Palette в свой угловой компонент 6.0.0

import Vibrant from 'node-vibrant';
import { Palette } from 'node-vibrant/lib/color';

Тогда было довольно легко вызвать ngOnInit() с помощью ссылки на изображение.

getVibrantColor(url: string){
  // Using builder
  Vibrant.from(url).getPalette((err, palette) => {
    console.log(palette)
    this.palette = palette;
  });

}

styleContainer(): any {
  console.log('palette', this.palette);
  if (this.palette.LightVibrant) {
    return { 'background-color': this.palette.LightVibrant.getHex(), 'border-color': 
      this.palette.LightMuted.getHex(), 'color': '#000000' };
  } else {
    return { 'background-color': '#FFFFFF', 'border-color':        
       this.palette.LightMuted.getHex(), 'color': '#000000' };
  }

}

И вызвать его из HTML-файла:

<div *ngIf="palette" class="col-lg-8 details-top-container" 
[ngStyle]="styleContainer()"></div>

Сложнее всего было получить правильное заявление на импорт.

import * as Vibrant from 'node-vibrant';

не будет работать, поскольку документация говорит, что это будет.

Надеюсь, это сэкономит кому-то время.

PK