distil-wasm

This is a WebAssembly port of Elliot Jackson's Distil app (original repo: https://github.com/elliotekj/distil

Installation

npm i distil

Development

If you want to start to play around with the code, you will need the following toolchain to make it work:

• rust toolchain
• wasm-pack

After installing everything you can use wasm-pack build to build and generate the npm module with the compiled wasm file.

Usage

Because distil is a WebAssembly library, we will need Webpack 4 to help us easily bundle it. Luckily there is an app template for that which is called create-wasm-app. To set everything up you can do the following:

mkdir distil-app
cd distil-app
npm init wasm-app
npm i && npm i distil
npm start

After running npm init wasm-app we will have a full project generated and ready to hack. In the index.js file we can import the following file:

import { distil } from `distil`

the module export the following method: distil(img: Uint8Array[]) -> [[r, g, b], ...]. It will recieve an image as an array buffer and it will a matrix with three columns (r, g, b) and ten rows, like: [[255, 255, 255], ...] which will represet our distilled colors.

Example

In the generated index.js we can add the following lines of code to get a result:

import { distil } from 'distil';

const renderColors = async (imageName) => {
	const response = await fetch(imageName);
	const blob = await response.blob();
	const result = await new Promise((resolve, reject) => {
	  const reader = new FileReader();
	  reader.onloadend = () => {
	    if (reader.result instanceof ArrayBuffer) {
	      return resolve(reader.result);
	    } else {
	      return reject(new Error("Could not create arraybuffer"));
	    }
	  };
	  reader.onerror = reject;
	  reader.readAsArrayBuffer(blob);
	});

		
	const colors = distil(new Uint8Array(result));

	const container = document.body;
	container.innerHTML = '';
	console.log(colors);
	colors.forEach(([r, g, b]) => {
		const span = document.createElement('span');
		span.style.backgroundColor = `rgb(${r}, ${g}, ${b})`;
		span.style.width="100px";
		span.style.height="100px";
		span.style.display="inline-block";
		container.appendChild(span);
	});
};

window.distil = renderColors;

and for an example like this;

you can run the code below into the browser's console:

distil('img-1.jpg');

you should get the following output: