当前位置: 首页 > 工具软件 > Vibrant.js > 使用案例 >

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

郎俊雅
2023-12-01

vue 调色板

节点振动的 (node-vibrant)

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

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

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.jsdist/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下载捆绑软件

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

贡献准则 (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<Options>) (constructor(src: ImageSource, opts: Partial<Options>))

NameDescription
imagePath to image file (support HTTP/HTTPs)
optsOptions (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
}
FieldDefaultDescription
colorCount64amount of colors in initial palette from which the swatches will be generated
quality5Scale down factor used in downsampling stage. 1 means no downsampling. If maxDimension is set, this value will not be used.
maxDimensionundefinedThe max size of the image's longer side used in downsampling stage. This field will override quality.
filters[]An array of filters
ImageClassImage.Node or Image.BrowserAn Image implementation class
quantizerVibrant.Quantizer.MMCQA Quantizer implementation class
generatorVibrant.Generator.DefaultAn Generator instance
领域 默认 描述
colorCount 64 初始调色板中从中生成色样的颜色数量
quality 5 下采样阶段使用的按比例缩小因子。 1表示没有下采样。 如果设置了maxDimension ,则不会使用此值。
maxDimension undefined 下采样阶段使用的图像长边的最大尺寸。 此字段将覆盖quality
filters [] 过滤器数组
ImageClass Image.NodeImage.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>)

NameDescription
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.

内部使用。

NameDescription
rgb[r, g, b]
populationPopulation 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.

计算lab1lab2之间的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.

计算rgb1rgb2之间的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.

计算hex1hex2之间的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 EPerceptionReturns
<= 1.0Not perceptible by human eyes."Perfect"
1 - 2Perceptible through close observation."Close"
2 - 10Perceptible at a glance."Good"
11 - 49Colors are more similar than opposite"Similar"
50 - 100Colors are exact oppositeWrong
三角洲E 知觉 退货
<= 1.0 人眼无法感知。 "Perfect"
1-2 通过仔细观察可以看出。 "Close"
2-10 一目了然。 "Good"
11-49 颜色比相反更相似 "Similar"
50-100 颜色正好相反 Wrong

NPM任务 (NPM Tasks)

TaskDescription
build:browserBuild browser target
build:nodeBuild node.js target
buildBuild all targets
clean:browserClean browser build
clean:nodeClean node.js build
cleanClean all builds
test:browserRun browser specs (karma)
test:nodeRun node.js specs (mocha)
testRun 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 调色板

 类似资料: