Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/0x-jerry/mmcq.js
Extract prominent colors from image
https://github.com/0x-jerry/mmcq.js
javascript mmcq rust typescript web-assembly
Last synced: about 2 months ago
JSON representation
Extract prominent colors from image
- Host: GitHub
- URL: https://github.com/0x-jerry/mmcq.js
- Owner: 0x-jerry
- License: mit
- Created: 2018-04-02T03:48:26.000Z (almost 7 years ago)
- Default Branch: main
- Last Pushed: 2024-07-02T03:53:21.000Z (6 months ago)
- Last Synced: 2024-08-09T15:50:56.300Z (5 months ago)
- Topics: javascript, mmcq, rust, typescript, web-assembly
- Language: TypeScript
- Homepage: https://0x-jerry.github.io/mmcq.js
- Size: 9.35 MB
- Stars: 12
- Watchers: 1
- Forks: 1
- Open Issues: 4
-
Metadata Files:
- Readme: readme.md
- License: LICENSE
Awesome Lists containing this project
README
# [MMCQ.JS][mmcq]
> `MMCQ (modified median cut quantization)`, the name is from Leptonica library (http://www.leptonica.com/).
提取颜色主色调，支持 WebAssembly (Extract prominent colors from image, support WebAssembly)
仅 300 行不到的代码，且零依赖。(< 300 lines source code, zero dependency)
[例子 | See Demo](https://0x-jerry.github.io/mmcq.js)
## 安装 (Install)
```sh
pnpm i mmcq.js
# or
yarn add mmcq.js
# or
npm install mmcq.js
```
或者(Or)
```html
console.log(window.MMCQJS)
```
## 用法 (Usage)
```ts
import { mmcq } from 'mmcq.js'
main()
async function main() {
const img = document.getElementById('img-id') as HTMLImageElement
const data = getImageData(img, 1)
const colors = await mmcq(data, {
count: 8,
algorithm: 8,
useWebAssembly: true,
})
colors.forEach((color) => console.log(color.rgb))
}
// --------- utils
function getImageData(
image: HTMLImageElement,
/**
* 0.1 - 1
**/
imageQuality: number,
): Uint8ClampedArray {
const sharedCanvasId = 'xxxxxxx'
const canvas = (document.getElementById(sharedCanvasId) ||
document.createElement('canvas')) as HTMLCanvasElement
canvas.id = sharedCanvasId
canvas.style.display = 'none'
document.body.append(canvas)
canvas.width = image.naturalWidth * imageQuality
canvas.height = image.naturalHeight * imageQuality
canvas.style.width = canvas.width + 'px'
canvas.style.height = canvas.height + 'px'
const ctx = canvas.getContext('2d')
if (!ctx) {
return [] as any
}
ctx.drawImage(image, 0, 0, canvas.width, canvas.height)
const data = ctx.getImageData(0, 0, canvas.width, canvas.height)
return data.data
}
```
## Development
install wasm-pack: https://rustwasm.github.io/wasm-pack/installer/
1. build wasm
```sh
pnpm run wasm
```
2. start dev server
```sh
pnpm i
pnpm run dev
# or
pnpm run dev:wasm
```
[mmcq]: https://www.wikiwand.com/en/Median_cut
## Contribute
All kinds of contributions are welcome!