npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

image-color-utils

v1.3.2

Published

Operate image pixels, such as pickup color, color contrast, etc

Downloads

20

Readme

image-color-utils

DESC

Provide pickup color, color similarity comparison, color boundary value calculation and other capabilities。

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,
  onload,
}
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 onload | 加载完成 | ()=>void | - | 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[]

# pickColors - 提取图片色值

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


const imageColorUtils = new ImageColorUtils({
  origin: img,
  width: canvas.width,
  height: canvas.height
})
const res = imageColorUtils.pickColors()
Returns
Returns

Desc | Type -------- | -------- 图片色值 | {rgb: string[], hex: string[] }

# 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, type)
Arguments

Name | Desc | Type | Default | required -------- | -------- | -------- | -------- | ----- color1 | rgb 色值1 | number[] | - | true color2 | rgb 色值2 | number[] | - | true boundaryValue | 色彩边界阈值(作用于色值相似度对比, 阈值越高,相似条件越高) | number | 10 | false type | 颜色模型 | 'rgb' or 'lab' | 'rgb' | true

Returns

Desc | Type -------- | -------- 是否相似 | boolean

# hex2rgb - HEX色值转RGB色值

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

const rgb = hex2rgb(hex)
Arguments

Name | Desc | Type | Default | required -------- | -------- | -------- | -------- | ----- hex | HEX色值 | String | - | true

Returns

Desc | Type -------- | -------- RGB色值 | number[]

# rgb2hex - RGB色值转HEX色值

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

const hex = 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