JavaScript Library For Mosaic Image Processing – photomosaic.js

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
    
})