photomosaic.js's Introduction

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 using npm run commit and everything will be automatically done.
Update the documentation to reflect any changes.
Push to your fork and submit a pull request.