https://github.com/taenykim/interactive-pixelator

🌇 🌃 upload image and make interactive pixel art 🕹
https://github.com/taenykim/interactive-pixelator

art canvas image image-processing interactive javascript pixel pixelator typescript

Last synced: 2 months ago
JSON representation

🌇 🌃 upload image and make interactive pixel art 🕹

• Host: GitHub
• URL: https://github.com/taenykim/interactive-pixelator
• Owner: taenykim
• License: mit
• Created: 2020-06-10T10:00:11.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2023-01-06T14:56:46.000Z (about 2 years ago)
• Last Synced: 2024-09-16T23:33:06.211Z (4 months ago)
• Topics: art, canvas, image, image-processing, interactive, javascript, pixel, pixelator, typescript
• Language: TypeScript
• Homepage: https://interactive-pixelator.vercel.app
• Size: 35 MB
• Stars: 26
• Watchers: 2
• Forks: 0
• Open Issues: 37
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-list - interactive-pixelator

README

        
# Interactive pixelator

![npm](https://img.shields.io/npm/v/interactive-pixelator)

![GitHub](https://img.shields.io/github/license/taenykim/interactive-pixelator)

![dependencies](https://img.shields.io/badge/dependencies-none-brightengreen)

![typed](https://badgen.net/badge/icon/Typed?icon=typescript&label&labelColor=555555&color=blue)

🌇 🌃 upload image and make interactive pixel art 🕹

**[Demo page](https://interactive-pixelator.vercel.app) / [NPM page](https://www.npmjs.com/package/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

```BASH

$ npm i interactive-pixelator

```

### 2. Create DOM container

> 🔥 Set width and height on the DOM element.

```html



```


### 3. And make Interactive Pixel Art!

> If necessary, Add a controller, download button, etc. (reference : **[Demo page](https://interactive-pixelator.vercel.app)**)

```typescript

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](https://github.com/taenykim/interactive-pixelator/tree/master/examples/demo-cra)

```BASH

$ 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.**