Mosaic blur is often used in images or videos, and today we use HTML5 Canvas technology to achieve the mosaic blur effect of a picture. In the demo we can drag the slider to set the degree of mosaic blur, you can see the image after the mosaic effect under different values. HTML5 is indeed very powerful. As follows:
Online preview Source Download
The implemented code.
HTML code:
<Divclass= "thumb"> <imgsrc= "Img/1.jpg"ID= "Dolly1" /> <imgsrc= "Img/2.jpg"ID= "Dolly2" /> <imgsrc= "Img/3.jpg"ID= "Dolly3" /> </Div>
JS Code:
Window.onload =function () { varDolly1 = document.getElementById (' dolly1 ')) varDolly2 = document.getElementById (' dolly2 ')) varDolly3 = document.getElementById (' Dolly3 ')) varPixelopts = [{Resolution:8}] varPixelDolly1 =dolly1.closepixelate (pixelopts)varPixelDolly2 =dolly2.closepixelate (pixelopts)varPixelDolly3 =dolly3.closepixelate (pixelopts)varRange = document.getElementById (' Range ') varOutput = document.getElementById (' Output ') Range.addeventlistener (' Change ',function(event) {varres = parseint (Event.target.value, 10) Res= Math.floor (RES/2) * 2Res= 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
Image mosaic Blur effect based on HTML5 canvas implementation