dont-crop

API 文档 | 演示

Dont-crop 是一个小巧的、无依赖的 JavaScript 库，用于将渐变拟合到图像或提取其主要颜色。

它可以用于填充图像而不是裁剪它们，用于非常紧凑的模糊效果，以及您能想到的其他用途。

示例

fitGradient()

fitGradient 照片由 Abed Ismail 拍摄

getPalette()

getPalette

安装

npm install -S dont-crop

使用方法

ES 模块

import {getPalette, fitGradient} from 'dont-crop';

const image = new Image();
// 图像需要加载完成后才能传递给 dont-crop
image.onload = () => {
  console.log(getPalette(image));
  // ['#000000', ...]
  console.log(fitGradient(image));
  // 'linear-gradient(#000000, #ffffff)`
}
image.src = 'example.jpg';

CommonJS

const getPalette = require('dont-crop').getPalette;
const fitGradient = require('dont-crop').fitGradient;
// ...

React

请参阅 examples/react/index.tsx 获取一个简单示例。

NodeJS

在 Node 中的使用取决于所使用的图像处理库。通常需要构造一个图像数据对象并传递给 getPaletteFromImageData 或 fitGradientToImageData。

基本函数 getPalette 和 fitGradient 不能在 NodeJS 中直接使用。至少不能在不做额外处理的情况下使用。

请参阅 examples/node-sharp/example.ts 中的 getImageData 以获取使用 sharp 的示例。

兼容性

该代码应该可以在所有常见的现代浏览器和 Node.js 12 版本及以上运行。它已经在以下环境中进行了测试：

Chrome
Firefox
Safari
Edge

性能

代码相当紧凑，并考虑了树摇优化。因此，您的打包文件只会包含您实际使用的功能。

当仅使用 fitGradient 并使用 webpack 5 打包代码时，dont-crop 将为您的打包文件增加约 1.2 kb（gzip 压缩后为 0.7 kb）。 getPalette 将花费您多一点，约 3.2 kb（gzip 压缩后为 1.7 kb）。您可以同时使用两者，大约 4 kb（gzip 压缩后为 2 kb）。

3925 dist/both.js
1911 dist/both.js.gz
1264 dist/fitGradient.js
710  dist/fitGradient.js.gz
3261 dist/getPalette.js
1656 dist/getPalette.js.gz

运行时性能也足够快，无需担心。

# 在 AMD Ryzen 9 5950X 上
fitGradientToImageData x 19,813 ops/sec ±0.96% (97 runs sampled)
getPaletteFromImageData(fast=false) x 156 ops/sec ±0.66% (83 runs sampled)
getPaletteFromImageData(fast=true) x 645 ops/sec ±0.17% (97 runs sampled)

对图像而非已缩小的图像数据进行操作的函数版本速度较慢。它们的性能取决于具体的浏览器和设备，但对于合理大小的图像，通常应该在几毫秒的范围内。

测试覆盖率

代码有良好的测试覆盖。这些示例被用作 Node 和浏览器（通过 puppeteer 使用 Chrome）中的端到端测试。

算法

很高兴你问到。fitGradient() 使用简单的线性回归。

getPalette() 基于 k-means 聚类。初始聚类使用直方图选择。结果中的相似聚类在后处理步骤中合并。这是必要的，因为 k-means 倾向于返回大小相等的聚类，而 getPalette 应该返回不同的聚类。合并经过调整，以保留不同的色调和颜色，而不是返回最突出的颜色阴影（它们可能都具有相似的色调）。处理在 CIE Lab 色彩空间中进行，使用 CIE76 ΔE*。