/interactive-pixelator

πŸŒ‡ πŸŒƒ upload image and make interactive pixel art πŸ•Ή

Primary LanguageTypeScriptMIT LicenseMIT

Interactive pixelator

npm GitHub dependencies typed

πŸŒ‡ πŸŒƒ 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.