Bootstrap

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

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 (
;