关于前端:推荐一款个人开源的图片色值处理工具-imagecolorutils

41次阅读

共计 2687 个字符，预计需要花费 7 分钟才能阅读完成。

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
Desc Type
是否类似 boolean

\# 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
Desc Type
RGB 色值 number[]

\# 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
Desc Type
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)
Name Type
canvas OffscreenCanvas
ctx OffscreenCanvasRenderingContext2D
imageData ImageData

正文完
前端
发表至： 前端
2021-11-05
 0
关于前端:JavaScript深浅拷贝
关于前端:图扑智慧交通数字化地铁大屏管控运维平台
关于前端:WebSocket
关于前端:TS枚举