🌇 🌃 upload image and make interactive pixel art 🕹
| Original Image | Change Pixel size |
|
|
|
| Change Pixel type | Change Grid size |
|
|
|
| Change Grid color | Draw freely |
|
|
|
| Change filter | coming soon |
|
|
$ npm i interactive-pixelator🔥 Set width and height on the DOM element.
<div id="DOM-element-id"></div>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-ignoreI used create-react-app !
☺️ source code
$ git clone https://github.com/taenykim/interactive-pixelator.git
$ cd example/demo-cra
$ npm install
$ npm startThis project is in progress.
please give me a lot of advice and support.