当前位置: 首页 > 工具软件 > color-utils > 使用案例 >

推荐一款个人开源的图片色值处理工具 image-color-utils

栾钟展
2023-12-01

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

import { ImageColorUtils } from 'image-color-utils'

const params = {
  origin: img,
  width: canvas.width,
  height: canvas.height,
  boundaryValue,
  mockMovePx
}
const imageColorUtils = new ImageColorUtils(params)
Arguments
NameDescTypeDefaultrequired
origin数据源(可以是 http链接 / ImageBitmap / HTMLImageElement )string / HTMLImageElement / ImageBitmap /-true
width画板宽度number-false (不传参将根据图片宽高自适应,origin 为 ImageBitmap / HTMLImageElemen,必填)
height画板高度number-false (不传参将根据图片宽高自适应,origin 为 ImageBitmap / HTMLImageElemen,必填)
mockMovePx边界扫描距离(最大边界扫描距离, 扫描方向由内向外)number30false
boundaryValue色彩边界阈值(作用于色值相似度对比, 阈值越高,相似条件越高)number10false
Returns
DescType
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
NameDescTypeDefaultrequired
x目标点距离画布左上角x坐标number-true
y目标点距离画布左上角y坐标number-true
Returns
DescType
目标点 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
NameDescTypeDefaultrequired
leftTopPosition图片所选区域初始左上角坐标number[][]false
rightBottomPosition图片所选区域初始右下角坐标number[][]false
Returns
DescType
边界计算后左上角坐标(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
NameDescTypeDefaultrequired
color1rgb 色值1number[]-true
color2rgb 色值2number[]-true
boundaryValue色彩边界阈值(作用于色值相似度对比, 阈值越高,相似条件越高)number10false
Returns
DescType
是否相似boolean

# hex2rgb - HEX色值转RGB色值

import { ImageColorUtils } from 'image-color-utils'

const rgb = ImageColorUtils.hex2rgb(hex)
Arguments
NameDescTypeDefaultrequired
hexHEX色值String-true
Returns
DescType
RGB色值number[]

# rgb2hex - RGB色值转HEX色值

import { ImageColorUtils } from 'image-color-utils'

const hex = ImageColorUtils.rgb2hex(rgb)
Arguments
NameDescTypeDefaultrequired
rgbRGB色值number[]-true
Returns
DescType
HEX色值string

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)
NameType
canvasOffscreenCanvas
ctxOffscreenCanvasRenderingContext2D
imageDataImageData
 类似资料: