vue 调色板_使用vue.js从图像中获取主要调色板

vue 调色板

节点振动的 (node-vibrant)

Extract prominent colors from an image (node-vibrant).

从图像中提取突出的颜色(节点充满活力)。

View Demo 查看演示 View Github 查看Github

v3.0中新的WebWorker支持 (New WebWorker support in v3.0)

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:

使用此功能的方法如下：

1. 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作为条目

2. Use WebWorker quantizer:

   使用WebWorker量化器：

   let v = Vibrant.from(src)
     .useQuantizer(Vibrant.Quantizer.WebWorker)
     // Other configurations

特征 (Features)

• Identical API for both node.js and browser environment

  适用于node.js和浏览器环境的相同API

• Support browserify/webpack

  支持browserify / webpack

• Consistent results (*See Result Consistency)

  结果一致 (*请参阅结果一致 )

安装 (Install)

$ npm install node-vibrant

用法 (Usage)

node.js / browserify (node.js / browserify)

// 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))

浏览器 (Browser)

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下载捆绑软件 。

贡献准则 (Contribution Guidelines)

1. Make changes

   做出改变

2. Write test specs if necessary

   必要时编写测试规格

3. Pass tests

   通过测试

4. Commit source files only (without compiled files)

   仅提交源文件 (不包含编译文件)

参考资料 (References)

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) (constructor(src: ImageSource, opts: Partial))

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
    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 (Resolvable)

export type Resolvable = T | Promise

Quantizer (Quantizer)

export interface Quantizer {
    (pixels: Pixels, opts: Options): Resolvable>
}

Generator (Generator)

export interface Generator {
    (swatches: Array, opts?: Object): Resolvable
}

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): Promise (getPalette(cb?: Callback): Promise)

Name	Description
cb	(Optional) callback function. Can be omitted when using Promise.

名称	描述
cb	(可选)回调函数。 使用Promise时可以省略。

Callback (Callback)

export interface Callback {
    (err?: Error, result?: T): void
}

getSwatches(cb?: Callback): Promise (getSwatches(cb?: Callback): Promise)

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) (constructor(src: ImageSource, opts: Partial))

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): Promise (getPalette(cb?: Callback): Promise)

Builds a Vibrant instance as configured and calls its getPalette method.

根据配置构建一个Vibrant实例，并调用其getPalette方法。

getSwatches(cb? Callback): Promise (getSwatches(cb? Callback): Promise)

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 {
    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

NPM任务 (NPM Tasks)

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	运行所有规格

笔记 (Notes)

故意偏离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一起使用。

结果一致性 (Result Consistency)

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 调色板