0.1.4 • Published 5 years ago
cquant-web v0.1.4
cquant-web
Preview
Usage
Install
npm i cquant-webAPI
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.wasmandindex.js(rename it if you need), or import from github directly.<script src="./index.js"></script>OR
<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)
})