Interactive pixelator
π 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-pixelator2. 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.