image-to-blocks

Convert image pixels into a nearest-color block blueprint plus a material list (Minecraft-style). Zero dependencies. Browser + Node.

Powers the free tool at image2blocks.com — turn any picture into a Minecraft block blueprint in your browser.

Install

npm install image-to-blocks

Node / raw pixels

import { imageToBlocks, materialsToCSV } from "image-to-blocks";

// pixels: RGBA array of length width*height*4
const { grid, materials } = imageToBlocks(pixels, width, height);
console.log(materials);            // [{ id, count, percent }, ...]
console.log(materialsToCSV(materials));

Browser (from a canvas / ImageData)

import { fromImage } from "image-to-blocks/browser";
const result = fromImage(imgElement, 64, 64); // 64x64 blueprint

Bring your own palette: imageToBlocks(pixels, w, h, { palette: [{ id, rgb: [r,g,b] }, ...] }).

API

| Function | Description | | --- | --- | | imageToBlocks(pixels, w, h, opts?) | Returns { grid, materials, width, height, total }. | | materialsToCSV(materials) | Material list → CSV text. | | DEFAULT_PALETTE | Small built-in builder palette. | | fromImageData / fromImage (from /browser) | Convert from canvas sources. |

Try it live at image2blocks.com.

License

MIT