vue 调色板
Extract prominent colors from an image (node-vibrant).
从图像中提取突出的颜色(节点充满活力)。
Quantization is the most time-consuming stage in node-vibrant
. In v3.0, the quantization can be run in the WebWorker to avoid freezing the UI thread.
量化是node-vibrant
振动中最耗时的阶段。 在v3.0中,可以在WebWorker中运行量化以避免冻结UI线程。
Here's how to use this feature:
使用此功能的方法如下:
Use WebWorker build dist/vibrant.worker.js
or dist/vibrant.worker.min.js
. Or if you are re-bundling with webpack, use lib/bundle.worker.js
as entry
使用WebWorker构建dist/vibrant.worker.js
或dist/vibrant.worker.min.js
。 或者,如果您要重新打包Webpack,请使用lib/bundle.worker.js
作为条目
Use WebWorker quantizer:
使用WebWorker量化器:
let v = Vibrant.from(src)
.useQuantizer(Vibrant.Quantizer.WebWorker)
// Other configurations
Identical API for both node.js and browser environment
适用于node.js和浏览器环境的相同API
Support browserify/webpack
支持browserify / webpack
Consistent results (*See Result Consistency)
$ npm install node-vibrant
// ES5
var Vibrant = require('node-vibrant')
// ES6
import * as Vibrant from 'node-vibrant'
// TypeScript
import Vibrant = require('node-vibrant')
// Using builder
Vibrant.from('path/to/image').getPalette((err, palette) => console.log(palette))
// Promise
Vibrant.from('path/to/image').getPalette()
.then((palette) => console.log(palette))
// Using constructor
let v = new Vibrant('path/to/image', opts)
v.getPalette((err, palette) => console.log(palette))
// Promise
v.getPalette().then((palette) => console.log(palette))
If you installed node-vibrant with npm
, compiled bundles are available under node_modules/node-vibrant/dist
. Or you can download bundles from Relases.
如果您使用npm
安装了node- node_modules/node-vibrant/dist
,则在node_modules/node-vibrant/dist
下可以找到编译后的捆绑软件。 或者,您可以从Relases下载捆绑软件 。
<!-- Debug version -->
<script src="/path/to/dist/vibrant.js"></script>
<!-- Uglified version -->
<script src="/path/to/dist/vibrant.min.js"></script>
<script>
// Use `Vibrant` in script
// Vibrant is exported to global. window.Vibrant === Vibrant
Vibrant.from('path/to/image').getPalette(function(err, palette) {});
// Promise
Vibrant.from('path/to/image').getPalette().then(function(palette) {});
// Or
var v = new Vibrant('/path/to/image', opts);
// ... same as in node.js
</script>
Make changes
做出改变
Write test specs if necessary
必要时编写测试规格
Pass tests
通过测试
Commit source files only (without compiled files)
仅提交源文件 (不包含编译文件)
Vibrant
(Vibrant
)Main class of node-vibrant
.
node-vibrant
主要类别。
Vibrant.from(src: ImageSource): Builder
(Vibrant.from(src: ImageSource): Builder
)Make a Builder
for an image. Returns a Builder
instance.
为图像制作Builder
。 返回一个Builder
实例。
constructor(src: ImageSource, opts: Partial<Options>)
(constructor(src: ImageSource, opts: Partial<Options>)
)Name | Description |
---|---|
image | Path to image file (support HTTP/HTTPs) |
opts | Options (optional) |
名称 | 描述 |
---|---|
image | 图像文件的路径(支持HTTP / HTTPs) |
opts | 选项(可选) |
ImageSource
(ImageSource
)export type ImageSource = string
| HTMLImageElement // Browser only
| Buffer // Node.js only
Options
(Options
)export interface Options {
colorCount: number
quality: number
maxDimension: number
filters: Array<Filter>
ImageClass: ImageClass
quantizer: Quantizer
generator?: Generator
}
Field | Default | Description |
---|---|---|
colorCount | 64 | amount of colors in initial palette from which the swatches will be generated |
quality | 5 | Scale down factor used in downsampling stage. 1 means no downsampling. If maxDimension is set, this value will not be used. |
maxDimension | undefined | The max size of the image's longer side used in downsampling stage. This field will override quality . |
filters | [] | An array of filters |
ImageClass | Image.Node or Image.Browser | An Image implementation class |
quantizer | Vibrant.Quantizer.MMCQ | A Quantizer implementation class |
generator | Vibrant.Generator.Default | An Generator instance |
领域 | 默认 | 描述 |
---|---|---|
colorCount | 64 | 初始调色板中从中生成色样的颜色数量 |
quality | 5 | 下采样阶段使用的按比例缩小因子。 1 表示没有下采样。 如果设置了maxDimension ,则不会使用此值。 |
maxDimension | undefined | 下采样阶段使用的图像长边的最大尺寸。 此字段将覆盖quality 。 |
filters | [] | 过滤器数组 |
ImageClass | Image.Node 或Image.Browser | Image 实现类 |
quantizer | Vibrant.Quantizer.MMCQ | Quantizer 实现类 |
generator | Vibrant.Generator.Default | Generator 实例 |
Resolvable<T>
(Resolvable<T>
)export type Resolvable<T> = T | Promise<T>
Quantizer
(Quantizer
)export interface Quantizer {
(pixels: Pixels, opts: Options): Resolvable<Array<Swatch>>
}
Generator
(Generator
)export interface Generator {
(swatches: Array<Swatch>, opts?: Object): Resolvable<Palette>
}
Filter
(Filter
)Returns true
if the color is to be kept.
如果要保留颜色,则返回true
。
export interface Filter {
(red: number, green: number, blue: number, alpha: number): boolean
}
getPalette(cb?: Callback<Palette>): Promise<Palette>
(getPalette(cb?: Callback<Palette>): Promise<Palette>
)Name | Description |
---|---|
cb | (Optional) callback function. Can be omitted when using Promise . |
名称 | 描述 |
---|---|
cb | (可选)回调函数。 使用Promise 时可以省略。 |
Callback<T>
(Callback<T>
)export interface Callback<T> {
(err?: Error, result?: T): void
}
getSwatches(cb?: Callback<Palette>): Promise<Palette>
(getSwatches(cb?: Callback<Palette>): Promise<Palette>
)Alias of getPalette
.
getPalette
别名。
Vibrant.Builder
(Vibrant.Builder
)Helper class for change configurations and create a Vibrant
instance. Methods of a Builder
instance can be chained like:
用于更改配置并创建Vibrant
实例的Helper类。 可以将Builder
实例的方法链接起来,如下所示:
Vibrant.from(src)
.quality(1)
.clearFilters()
// ...
.getPalette()
.then((palette) => {})
constructor(src: ImageSource, opts: Partial<Options>)
(constructor(src: ImageSource, opts: Partial<Options>)
)Arguments are the same as Vibrant.constructor
.
参数与Vibrant.constructor
相同。
quality(q: number): Builder
(quality(q: number): Builder
)Sets opts.quality
to q
. Returns this Builder
instance.
将opts.quality
设置为q
。 返回此Builder
实例。
maxColorCount(n: number): Builder
(maxColorCount(n: number): Builder
)Sets opts.colorCount
to n
. Returns this Builder
instance.
将opts.colorCount
设置为n
。 返回此Builder
实例。
maxDimension(d: number): Builder
(maxDimension(d: number): Builder
)Sets opts.maxDimension
to d
. Returns this Builder
instance.
将opts.maxDimension
设置为d
。 返回此Builder
实例。
addFilter(f: Filter): Builder
(addFilter(f: Filter): Builder
)Adds a filter function. Returns this Builder
instance.
添加过滤器功能。 返回此Builder
实例。
removeFilter(f: Filter): Builder
(removeFilter(f: Filter): Builder
)Removes a filter function. Returns this Builder
instance.
删除过滤器功能。 返回此Builder
实例。
clearFilters(): Builder
(clearFilters(): Builder
)Clear all filters. Returns this Builder
instance.
清除所有过滤器。 返回此Builder
实例。
useImageClass(imageClass: ImageClass): Builder
(useImageClass(imageClass: ImageClass): Builder
)Specifies which Image
implementation class to use. Returns this Builder
instance.
指定要使用的Image
实现类。 返回此Builder
实例。
useQuantizer(quantizer: Quantizer): Builder
(useQuantizer(quantizer: Quantizer): Builder
)Specifies which Quantizer
implementation class to use. Returns this Builder
instance.
指定要使用的Quantizer
实现类。 返回此Builder
实例。
useGenerator(generator: Generator): Builder
(useGenerator(generator: Generator): Builder
)Sets opts.generator
to generator
. Returns this Builder
instance.
将opts.generator
设置为generator
。 返回此Builder
实例。
build(): Vibrant
(build(): Vibrant
)Builds and returns a Vibrant
instance as configured.
根据配置生成并返回一个Vibrant
实例。
getPalette(cb?: Callback<Palette>): Promise<Palette>
(getPalette(cb?: Callback<Palette>): Promise<Palette>
)Builds a Vibrant
instance as configured and calls its getPalette
method.
根据配置构建一个Vibrant
实例,并调用其getPalette
方法。
getSwatches(cb? Callback<Palette>): Promise<Palette>
(getSwatches(cb? Callback<Palette>): Promise<Palette>
)Alias of getPalette
.
getPalette
别名。
Vibrant.Swatch
(Vibrant.Swatch
)Represents a color swatch generated from an image's palette.
表示从图像调色板生成的色样。
Vec3
(Vec3
)export interface Vec3 extends Array<number> {
0: number,
1: number,
2: number
}
constructor(rgb: Vec3, population: number)
(constructor(rgb: Vec3, population: number)
)Internal use.
内部使用。
Name | Description |
---|---|
rgb | [r, g, b] |
population | Population of the color in an image |
名称 | 描述 |
---|---|
rgb | [r, g, b] |
population | 图像中的颜色填充 |
getHsl(): Vec3
(getHsl(): Vec3
)getPopulation(): number
(getPopulation(): number
)getRgb(): Vec3
(getRgb(): Vec3
)getHex(): string
(getHex(): string
)getTitleTextColor(): string
(getTitleTextColor(): string
)Returns an appropriate color to use for any 'title' text which is displayed over this Swatch
's color.
返回适当的颜色以用于显示在此Swatch
颜色上方的任何“标题”文本。
getBodyTextColor(): string
(getBodyTextColor(): string
)Returns an appropriate color to use for any 'body' text which is displayed over this Swatch
's color.
返回适当的颜色以用于此Swatch
颜色上方显示的任何“正文”文本。
Vibrant.Util
(Vibrant.Util
)Utility methods. Internal usage.
实用方法。 内部使用。
hexToRgb(hex: string): Vec3
(hexToRgb(hex: string): Vec3
)rgbToHex(r: number, g: number, b: number): string
(rgbToHex(r: number, g: number, b: number): string
)hslToRgb(h: number, s: number, l: number): Vec3
(hslToRgb(h: number, s: number, l: number): Vec3
)rgbToHsl(r: number, g: number, b: number): Vec3
(rgbToHsl(r: number, g: number, b: number): Vec3
)xyzToRgb(x: number, y: number, z: number): Vec3
(xyzToRgb(x: number, y: number, z: number): Vec3
)rgbToXyz(r: number, g: number, b: number): Vec3
(rgbToXyz(r: number, g: number, b: number): Vec3
)xyzToCIELab(x: number, y: number, z: number): Vec3
(xyzToCIELab(x: number, y: number, z: number): Vec3
)rgbToCIELab(l: number, a: number, b: number): Vec3
(rgbToCIELab(l: number, a: number, b: number): Vec3
)deltaE94(lab1: number, lab2: number): number
(deltaE94(lab1: number, lab2: number): number
)Computes CIE delta E 1994 diff between lab1
and lab2
. The 2 colors are in CIE-Lab color space. Used in tests to compare 2 colors' perceptual similarity.
计算lab1
和lab2
之间的CIE delta E 1994差异。 这两种颜色在CIE-Lab颜色空间中。 在测试中用于比较两种颜色的感知相似度。
rgbDiff(rgb1: Vec3, rgb2: Vec3): number
(rgbDiff(rgb1: Vec3, rgb2: Vec3): number
)Compute CIE delta E 1994 diff between rgb1
and rgb2
.
计算rgb1
和rgb2
之间的CIE delta E 1994 diff。
hexDiff(hex1: string, hex2: string): number
(hexDiff(hex1: string, hex2: string): number
)Compute CIE delta E 1994 diff between hex1
and hex2
.
计算hex1
和hex2
之间的CIE delta E 1994 diff。
getColorDiffStatus(d: number): string
(getColorDiffStatus(d: number): string
)Gets a string to describe the meaning of the color diff. Used in tests.
获取一个字符串来描述颜色差异的含义。 用于测试。
Delta E | Perception | Returns |
---|---|---|
<= 1.0 | Not perceptible by human eyes. | "Perfect" |
1 - 2 | Perceptible through close observation. | "Close" |
2 - 10 | Perceptible at a glance. | "Good" |
11 - 49 | Colors are more similar than opposite | "Similar" |
50 - 100 | Colors are exact opposite | Wrong |
三角洲E | 知觉 | 退货 |
---|---|---|
<= 1.0 | 人眼无法感知。 | "Perfect" |
1-2 | 通过仔细观察可以看出。 | "Close" |
2-10 | 一目了然。 | "Good" |
11-49 | 颜色比相反更相似 | "Similar" |
50-100 | 颜色正好相反 | Wrong |
Task | Description |
---|---|
build:browser | Build browser target |
build:node | Build node.js target |
build | Build all targets |
clean:browser | Clean browser build |
clean:node | Clean node.js build |
clean | Clean all builds |
test:browser | Run browser specs (karma) |
test:node | Run node.js specs (mocha) |
test | Run all specs |
任务 | 描述 |
---|---|
build:browser | 建立浏览器目标 |
build:node | 构建node.js目标 |
build | 建立所有目标 |
clean:browser | 干净的浏览器版本 |
clean:node | 清理node.js构建 |
clean | 清理所有构建 |
test:browser | 运行浏览器规格(业力) |
test:node | 运行node.js规范(mocha) |
test | 运行所有规格 |
vibrant.js
(Intentional Deviation From vibrant.js
)node-vibrant
takes image path, not the image object as parameter for the obvious reason that node.js environment has no access to HTML DOM object.
显然, node-vibrant
将图像路径而不是图像对象作为参数,原因很明显,node.js环境无法访问HTML DOM对象。
node-vibrant
provides asynchronous API since most node.js image processing library is asynchronous. And the original vibrant.js
workflow is asynchronous any way (though you will have to handle the image loading yourself, while node-vibrant
does it for you).
由于大多数node.js图像处理库都是异步的,因此node-vibrant
提供了异步API。 原始的vibrant.js
工作流程vibrant.js
都是异步的(尽管您必须自己处理图像加载,而node-vibrant
vibrant.js
会为您完成)。
node-vibrant
uses one single opts
object to hold all options for future expansions. And it feels more node.js-like.
node-vibrant
使用单个opts
对象保存所有选项,以供将来扩展。 而且感觉更像node.js。
node-vibrant
uses method call to initiate image processing instead of constructor so that developers can use it with Promise
.
node-vibrant
使用方法调用而不是构造函数来初始化图像处理,以便开发人员可以将其与Promise
一起使用。
The results is consistent within each user's browser instance regardelss of visible region or display size of the image, unlike the original vibrant.js
implementation.
结果与每个用户的浏览器实例在可见区域或图像显示尺寸上的结果保持一致,这与原始的vibrant.js
实现不同。
However, due to the very nature of HTML5 canvas element, image rendering is platform/machine-dependent. Thus the resulting swatches in browser environment varies and may not be the same as in node.js nor in another machine. See Canvas Fingerprinting.
但是,由于HTML5 canvas元素的本质,图像渲染取决于平台/机器。 因此,在浏览器环境中生成的色样会有所不同,并且可能与node.js或另一台机器中的色样不同。 请参阅“ 画布指纹” 。
The test specs use CIE delta E 1994 color difference to measure inconsistencies across platforms. It compares the generated color on node.js, Chrome, Firefox and IE11. At quality
== 1 (no downsampling) and no filters, the results are rather consistent. Color diffs between browsers are mostly not perceptible by human eyes. Downsampling will cause perceptible inconsistent results across browsers due to differences in canvas implementations.
测试规范使用CIE delta E 1994色差来测量跨平台的不一致情况。 它在node.js,Chrome,Firefox和IE11上比较生成的颜色。 在quality
== 1(无下采样)且没有滤波器的情况下,结果相当一致。 浏览器之间的色差大多是人眼无法察觉的。 由于画布实现方式的差异,降采样会导致浏览器的结果不一致。
翻译自: https://vuejsexamples.com/grab-the-dominant-color-palette-from-an-image-using-vue-js/
vue 调色板