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 install
to install all build dependencies(including Grunt). - Create a new branch, please DON'T work in your
master
branch 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 commit
and 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