photomosaic.js 
A javascript plugin that creates a photomosaic of an image. Demo is available here.
Getting started
Install via npm npm install photomosaic.js
Install via bower bower install photomosaic.js
Or Load the file manually
<script src="path/to/photomosaic.js"></script>Basic Usage
The minimum set of options required to use this plugin are as follows.
var photomosaic = new PhotoMosaic({ image : document.getElementById('image'), targetElement : document.getElementById('target'), width : 500, height : 500 })Advanced Options
| Option | Default Value | Description |
|---|---|---|
| image | null | [Mandatory] Image element selector |
| targetElement | null | [Mandatory] Target element selector |
| tileWidth | 5 | The tile division width for creating mosaic (in px) |
| tileHeight | 5 | The tile division height for creating mosaic (in px) |
| tileShape | ‘circle' | The shape of the tiles (circle or rectangle) |
| opacity | 1 | Opacity of the resulting image |
| width | null | [Mandatory] Width of the resulting image |
| height | null | [Mandatory] Height of the resulting image |
| defaultBackground | 'rgba(0, 0, 0, 0' | Default background to optimize result for png or other image with opacity |
Example
var photomosaic = new PhotoMosaic({ image : document.getElementById('image'), targetElement : document.getElementById('target'), width : 500, height : 500, tileHeight : 16, tileWidth : 16, tileShape : 'rectangle', opacity : 0.5 }) Contributing
- Fork and clone the repo.
- Run
npm installto install all build dependencies(including Grunt). - Create a new branch, please DON'T work in your
masterbranch directly. - Fix stuff or add new feature.
- This repo follows Angular commit guidelines. For this we are using commitizen. So instead of
git commit, prefer usingnpm run commitand everything will be automatically done. - Update the documentation to reflect any changes.
- Push to your fork and submit a pull request.
License
MIT © Ritesh Kumar
