A javascript plugin that creates a photomosaic of an image. Demo is available here.
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>
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
})
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 |
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
})
- 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.
MIT © Ritesh Kumar