image-color-utils
DESC
提供取色、色值类似度比照、色调边界值计算等能力。
demo
codesandbox
Install
npm install image-color-utils --save
Usage
es
import { ImageColorUtils } from 'image-color-utils'
commonjs
const { ImageColorUtils } = require('image-color-utils')
API
- ImageColorUtils
- pickColor
- adjust
- compare
- hex2rgb
- rgb2hex
\# 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 |
发表回复