distil

distil-wasm

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

Usage

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

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: