PIXIE

Javascript PixelArt generator

Powered by OpenCV JS

This is a repository containg a simple code to automatically generate nice looking pixelart.

It provides the features of automatic pixellation with edge enhance to outline the edges of the images nicely. It also supports recolouring of the image with color palettes.

Live Demo

https://pixie-alpha.vercel.app/

Examples

FAQ

Why? Isn't just a resize of the image ?

No, because there is also a sharpening phase involved, otherwise the result would just look blurry instead

See this example

Original	Simple Resize	Pixie without recoloring	Pixie

Is my data safe ?

Yes, your pictures never leave your device. Network is only required to load the page.

Files

file	description
pixie.js	file with the pixellation code
opencv.js	opencv dependency

API

// requires opencv.js 
function pixellate(imgElement, pixelSize, colors)
- imgElement: HTML image element of the page
- pixelSize: number of pixels of the original image to merge. Can be a float or int, from 0 to min(img.width, img.height)
- colors: list of colors in this RGB format
    if list is empty or undefined, no recoloring will be done. Otherwise recolouring using

API example

let example_palette = [[200,0,0], [0,200,0], [0,0,200]];
// add element to the page
let img = document.getElementById('img');

// create a canvas openCV object
let canvas = document.getElementById('canvas');

// call pixellate
// 10 is the pixel size
pixellate(img, canvas, 10, example_palette);

Credits

• Automatic color palette extraction done using this repo https://github.com/zygisS22/color-palette-extraction.git

• OpenCV for the js enviroment

• Bootstrap for the UI

• Vercel for hosting