基于HTML5 Canvas实现的图片马赛克模糊特效

<div class="thumb">
                <img src="img/1.jpg" id="dolly1" />
                <img src="img/2.jpg" id="dolly2" />
                <img src="img/3.jpg" id="dolly3" />
            </div>

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