Author: | ritz078 |
---|---|
Views Total: | 3,918 views |
Official Page: | Go to website |
Last Update: | October 8, 2015 |
License: | MIT |
Preview:

Description:
photomosaic.js is a small, standalone JavaScript plugin which takes advantage of HTML5 canvas technique to apply customizable mosaic effects to existing images.
How to use it:
Add a normal image to your web page.
<img src="image.jpg" id='before'>
Create a container to place the processed image.
<div id="after"></div>
Load the photomosaic.js file at the end of your html document.
<script src="photomosaic.js"></script>
Apply a default mosaic effect to the image.
var photomosaic = new PhotoMosaic({ image : document.getElementById('before'), targetElement : document.getElementById('after'), width : 500, height : 500 })
Full configuration options.
var photomosaic = new PhotoMosaic({ // original image image : document.getElementById('before'), // target container targetElement : document.getElementById('after'), // width of the image width : 500, // height of the image height : 500, // tile division height for creating mosaic tileHeight : 16, // tile division width for creating mosaic tileWidth : 16, // shape of the tiles (circle or rectangle) tileShape : 'rectangle', // opacity of the resulting image opacity : 0.5 })