Image Mosaic blur effects based on HTML5 Canvas,

Image Mosaic blur effects based on HTML5 Canvas,

Mosaic blur is often applied to images or videos. Today we will use the HTML5 Canvas technology to achieve mosaic blur. In the demonstration, we can drag the slider to set the degree of mosaic blur. You can observe the effect of the image after Mosaic under different values. HTML5 is indeed very powerful. As follows:

Download Online Preview source code

Implementation code.

Html code:

<div class="thumb">                                                            </div>

Js Code:

window.onload = function () {            var dolly1 = document.getElementById('dolly1')            var dolly2 = document.getElementById('dolly2')            var dolly3 = document.getElementById('dolly3')            var pixelOpts = [{ resolution: 8}]            var pixelDolly1 = dolly1.closePixelate(pixelOpts)            var pixelDolly2 = dolly2.closePixelate(pixelOpts)            var pixelDolly3 = dolly3.closePixelate(pixelOpts)            var range = document.getElementById('range')            var output = document.getElementById('output')            range.addEventListener('change', function (event) {                var res = parseInt(event.target.value, 10)                res = Math.floor(res / 2) * 2                res = Math.max(4, Math.min(100, res))                output.textContent = res                // console.log( res );                pixelOpts = [{ resolution: res}]                pixelDolly1.render(pixelOpts)                pixelDolly2.render(pixelOpts)                pixelDolly3.render(pixelOpts)            }, false)        }

Via: http://www.w2bc.com/Article/20795