taenykim / interactive-pixelator

🌇 🌃 upload image and make interactive pixel art 🕹

Interactive pixelator

🌇 🌃 upload image and make interactive pixel art 🕹

Demo page / NPM page

🌟 Feature

Original Image	Change Pixel size
Change Pixel type	Change Grid size
Change Grid color	Draw freely
Change filter	coming soon

🌈 How to use

1. NPM install

$ npm i interactive-pixelator

2. Create DOM container

🔥 Set width and height on the DOM element.

<div id="DOM-element-id"></div>

3. And make Interactive Pixel Art!

If necessary, Add a controller, download button, etc. (reference : Demo page)

import { Pixelator } from "interactive-pixelator";

new Pixelator("DOM-element-id", "image URL", {
    // options
    pixelSize: number, // 1~ (default:100)
    gridSize: number, // 0~ (default:10)
    gridColor: string, // #000000 (default:#ffffff)
    pixelType: string, // [square(default), roundsquare, circle, original]
    filterType: string // [none(default), grayscale, invert]
    });

//prettier-ignore

🏎 Demo play

I used create-react-app ! ☺️ source code

$ git clone https://github.com/taenykim/interactive-pixelator.git
$ cd example/demo-cra
$ npm install
$ npm start

✏️ And..

This project is in progress.

please give me a lot of advice and support.