image-color-utils
DESC
提供取色
、色值相似度对比
、色彩边界值计算
等能力。
Install
npm install image-color-utils --save
Usage
es
import { ImageColorUtils } from 'image-color-utils'
commonjs
const { ImageColorUtils } = require('image-color-utils')
API
\# ImageColorUtils
import { ImageColorUtils } from 'image-color-utils'
const params = {
origin: img,
width: canvas.width,
height: canvas.height,
boundaryValue,
mockMovePx
}
const imageColorUtils = new ImageColorUtils(params)
Arguments
Name |
Desc |
Type |
Default |
required |
origin |
数据源(可以是 http链接 / ImageBitmap / HTMLImageElement ) |
string / HTMLImageElement / ImageBitmap / |
- |
true |
width |
画板宽度 |
number |
- |
false (不传参将根据图片宽高自适应,origin 为 ImageBitmap / HTMLImageElemen,必填) |
height |
画板高度 |
number |
- |
false (不传参将根据图片宽高自适应,origin 为 ImageBitmap / HTMLImageElemen,必填) |
mockMovePx |
边界扫描距离(最大边界扫描距离, 扫描方向由内向外) |
number |
30 |
false |
boundaryValue |
色彩边界阈值(作用于色值相似度对比, 阈值越高,相似条件越高) |
number |
10 |
false |
Returns
Desc |
Type |
ImageColorUtils实例 |
Object |
\# pickColor - 提取色值
import { ImageColorUtils } from 'image-color-utils'
const imageColorUtils = new ImageColorUtils({
origin: img,
width: canvas.width,
height: canvas.height
})
const res = imageColorUtils.pickColor(x, y)
Arguments
Name |
Desc |
Type |
Default |
required |
x |
目标点距离画布左上角x坐标 |
number |
- |
true |
y |
目标点距离画布左上角y坐标 |
number |
- |
true |
Returns
Desc |
Type |
目标点 rgb 色值 |
number[] |
\# adjust - 色彩边界值计算
import { ImageColorUtils } from 'image-color-utils'
const imageColorUtils = new ImageColorUtils({
origin: img,
width: canvas.width,
height: canvas.height,
boundaryValue,
mockMovePx
})
imageColorUtils.adjust(leftTopPosition, rightBottomPosition)
Arguments
Name |
Desc |
Type |
Default |
required |
leftTopPosition |
图片所选区域初始左上角坐标 |
number[] |
[] |
false |
rightBottomPosition |
图片所选区域初始右下角坐标 |
number[] |
[] |
false |
Returns
Desc |
Type |
边界计算后左上角坐标(x,y)及区域宽高(width,height) |
Object:{x: number, y: number, width: number, height: number} |
\# compare - 色值相似度对比
import { ImageColorUtils } from 'image-color-utils'
const res = ImageColorUtils.compare(color1, color2, boundaryValue)
Arguments
Name |
Desc |
Type |
Default |
required |
color1 |
rgb 色值1 |
number[] |
- |
true |
color2 |
rgb 色值2 |
number[] |
- |
true |
boundaryValue |
色彩边界阈值(作用于色值相似度对比, 阈值越高,相似条件越高) |
number |
10 |
false |
Returns
\# hex2rgb - HEX色值转RGB色值
import { ImageColorUtils } from 'image-color-utils'
const rgb = ImageColorUtils.hex2rgb(hex)
Arguments
Name |
Desc |
Type |
Default |
required |
hex |
HEX色值 |
String |
- |
true |
Returns
\# rgb2hex - RGB色值转HEX色值
import { ImageColorUtils } from 'image-color-utils'
const hex = ImageColorUtils.rgb2hex(rgb)
Arguments
Name |
Desc |
Type |
Default |
required |
rgb |
RGB色值 |
number[] |
- |
true |
Returns
Attribute
import { ImageColorUtils } from 'image-color-utils'
const imageColorUtils = new ImageColorUtils({
origin: img,
width: canvas.width,
height: canvas.height,
boundaryValue,
mockMovePx
})
console.log(imageColorUtils.canvas)
console.log(imageColorUtils.ctx)
console.log(imageColorUtils.imageData)
Name |
Type |
canvas |
OffscreenCanvas |
ctx |
OffscreenCanvasRenderingContext2D |
imageData |
ImageData |