JavaScript Library For Mosaic Image Processing – photomosaic.js

Category: Image , Javascript | October 8, 2015
Author:ritz078
Views Total:3,765 views
Official Page:Go to website
Last Update:October 8, 2015
License:MIT

Preview:

JavaScript Library For Mosaic Image Processing – photomosaic.js

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

You Might Be Interested In:


Leave a Reply