角度 5，从图像中获取颜色

Question

我有一个使用 android.support.v7.graphics.Palette 从动态图像中获取颜色信息，然后自定义活动的布局以使用图像中的突变颜色。 我的问题是，Angular 5 有什么类似的东西吗？ 我想尽可能接近安卓版本的网络版本建模。 这意味着在选择图像后动态设置一些样式颜色。

更新：我一直在为javascript寻找ColorThief((。 但是我不确定如何从 Angular 5 组件访问它。

谢谢 PK

Answer 1

对于任何寻找这样的东西的人，我最终使用了node-vibrant.js。 我运行了 npm 安装 然后将该文件添加到 angular.json 文件中的 My Script 数组中

"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
}

然后，我将活力和调色板导入到我的角度 6.0.0 组件中

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

然后很容易调用ngOnInit((，只需一个图像的url

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