Package Exports

cquant-web

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (cquant-web) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

cquant-web

Preview

Online Example

Usage

Install

npm i cquant-web

API

cQuant.palette(image, maxColor).then((result) => {
})

image: could be a url to an image or a HTML img element
maxColor: maxColor you want
result: the result, an array of {red,blue,green,count}

Config for webpack

Webpack

add rule for WASM file

make sure you have installed the file-loader already

    module: {
        rules: [
            {
                test: /\.wasm$/,
                type: "javascript/auto",
                loader: "file-loader",
                options:{
                    name:'[name].[ext]' // if you want keep the WASM name
                }
            }
        ]
    },
    resolve: {
        alias: {
            // add alias for WASM importing
            cQuantWASM: path.join(__dirname, "./node_modules/cquant-web/dist/cquant.wasm")
        }
    }

Import & Usage

import CQuant from 'cquant-web'
import WASM from "cQuantWASM"
let cquant = new CQuant(WASM, true) // pass WASM module file path, enable log
// pass Image path, and the color amount you want
cquant.palette("./0.jpg", 10).then((result) => {
    console.log(result)
    let container = document.querySelector(".block-container")
    for (let item of result) {
        let box = document.createElement('div')
        box.className = "box"
        box.style.backgroundColor = `rgb(${item.red},${item.green},${item.blue})`
        container.appendChild(box)
    }
})

Vanilla js

Download

You will need to download the files in dist: cquant.wasm and index.js(rename it if you need), or import from github directly.

<script src="./index.js"></script>

<head>
<script src="https://rawgit.com/xVanTuring/cquant-web/master/dist/index.js"></script>
</head>

Usage

<script>
    var cQuant = new CQuant.default("./cquant.wasm", true) // pass path of the WASM file, and enable log
    // OR
    // var cQuant = new CQuant.default("https://rawgit.com/xVanTuring/cquant-web/master/dist/cquant.wasm", true)  

    cQuant.palette("https://picsum.photos/1920/1080", 10).then((result) => {
        console.log(result)
    })
</script>

Limitation

The cQuant.palette isnot fully async function actually.
It will load the WASM file async-ly,but the real palette computation will block the thread.
Of course, I'm working on it, web worker seems to be a good choice. \s

More info see

cquant-web-test