A pure JavaScript plugin to create a mosaic of an image.
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 |
defaultBackground | 'rgba(0, 0, 0, 0' | Default background to optimize result for png or other image with opacity |
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
})
npm install
to install all build dependencies(including Grunt).master
branch directly.git commit
, prefer using npm run commit
and everything will be automatically done.MIT © Ritesh Kumar