https://github.com/mersocarlin/mosaic-app

Prototype for build mosaic from images
https://github.com/mersocarlin/mosaic-app

Last synced: 1 day ago
JSON representation

Prototype for build mosaic from images

• Host: GitHub
• URL: https://github.com/mersocarlin/mosaic-app
• Owner: mersocarlin
• License: mit
• Created: 2016-01-03T18:54:44.000Z (almost 9 years ago)
• Default Branch: master
• Last Pushed: 2016-01-03T22:55:00.000Z (almost 9 years ago)
• Last Synced: 2024-04-24T10:07:09.773Z (8 months ago)
• Language: JavaScript
• Homepage:
• Size: 197 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
Mosaic App

----------

Prototype for build mosaic from images.

1. Select a local image file

2. The image is divided into tiles 16x16

  1. The size is configurable

3. For each tile, the average color is computed and the final result is rendered

How to run ?

------------

```

npm run dev

```

or

```

npm start

```

Features

--------

* [x] [NodeJS](https://nodejs.org/) and [Express](http://expressjs.com/)

* [x] [multer](https://www.npmjs.com/package/multer/) for image upload

* [x] jQuery is used only to send upload request without reloading the page

* [x] [Bootstrap](http://getbootstrap.com/) framework for minimal UI

* [x] ES6 syntax with [Babel](https://babeljs.io/)

* [x] Client side processing

Troubleshooting

---------------

* At first glance, I tried to process the tiles from server side with `gm` npm package. But depending on the

size of the image, I got an weird error and I was not able to solve it.

* Other problem is server processing of all tiles by url. E.g; `localhost:8765/color/hexcode`. Again, for big

images, this can take a long time, so I decided to render all tiles in client side for better performance.