Angular 5,从图像中获取颜色 [英] Angular 5, get colors from an image
问题描述
我有一个使用android.support.v7.graphics.Palette 从动态图像中获取颜色信息,然后自定义 Activity 的布局以使用图像中的变异颜色.我的问题是,Angular 5 有什么类似的吗?我想为这个项目的 web 版本建模尽可能接近 android 版本.这意味着在选择图像后动态设置一些样式颜色.
I have an android app that uses android.support.v7.graphics.Palette to get the color info from a dynamic image and then customize the layout of the activity to use mutated colors from the image. My question is, does Angular 5 have anything similiar? I want to model the web version of this project as closely to the android version as possible. This would mean dynamically setting a few style colors after an image is selected.
更新:我一直在查看 ColorThief() 的 javascript.但我不确定如何从 Angular 5 组件访问它.
Update: I have been looking at ColorThief() for javascript. But I am not sure how to access it from an Angular 5 component.
谢谢PK
推荐答案
对于任何正在寻找类似内容的人,我最终使用了 node-vibrant.js.我运行了 npm install然后将该文件添加到 angular.json 文件中的我的脚本数组
For anyone looking for something like this I ended up using node-vibrant.js. I ran npm install then added the file to my scripts array in the angular.json file
"scripts": [
"node_modules/node-vibrant/dist/vibrant.min.js"
]
然后我将我的 tsconfig.json 文件更改为以下内容:
Then I changed my tsconfig.json file to the following:
{
"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 导入到我的 angular 6.0.0 组件中
I then imported Vibrant and Palette into my angular 6.0.0 component
import Vibrant from 'node-vibrant';
import { Palette } from 'node-vibrant/lib/color';
然后很容易调用 ngOnInit() 只需一个图像的 url
Then it was pretty easy to call in ngOnInit() with just an url to an image
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 文件中调用它:
And call it from the html file:
<div *ngIf="palette" class="col-lg-8 details-top-container"
[ngStyle]="styleContainer()"></div>
最难的部分是获得正确的导入语句.
The hardest part was getting the proper import statement.
import * as Vibrant from 'node-vibrant';
不会像文档所说的那样工作.
would not work as the documentation says it will.
希望这可以为某人节省一些时间.
Hope this saves someone some time.
PK
这篇关于Angular 5,从图像中获取颜色的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!