Home > Developer > Web Develop
Please click on the following URL: http://hovertree.com/texiao/html5/1.htm
First, straight to the point
Inspired by the American portrait painter Chuck Close, the script transforms the image into pixels by using the HTML5 canvas element, which is basically a simple demonstration of the canvas ImageData feature.
This script exists on GitHub, where you can download to scripts and samples. View your pixelated resources on GitHub
Second, the option
This method accepts an array of objects and each object has a set of options.
Resolution: The pixel distance between rendered pixels is required.
Shape: The shapes of the pixels. The accepted options are: square, circle, and diamond. Optional, square is the default.
Size: The pixel size value of the rendered pixel, optionally, the default value is resolution.
Offset: offsets pixels. Optional, default is 0. Can be a separate value of 15 to implement a diagonal offset, or an object implementation offset for the array or x/y keywords:
[15, 5] or {x:15, y:5}.
Alpha: A decimal value that refers to the transparency of the rendering. Optional, default is 1.
Third, code example
To make the picture pixelated, first call the following script:
<script type= "Text/javascript" src= "Http://hovertree.com/texiao/html5/1/js/close-pixelate.js" ></script >
The method Closepixelate is then called, and more specifically:
Picture dom.closepixelate (option parameter)
This script can be applied to a variety of pictures. According to the HTML5 specification, browsers prohibit any external managed images from using Getimagedata (), but, thanks to the great contribution of John Schulz, by using the Getimagedata API of Max Novakovic, Further pixelated has built-in methods to address this security feature.
In your script using the Closepixelate method with the picture, you can control the output of the picture through a set of array options. The following example code:
document.getElementById (' PixelExample2 '). Closepixelate ([
{resolution:24}
] );
The HTML code is as follows:
<!DOCTYPE HTML><HTMLLang= "zh"><Head><MetaCharSet= "UTF-8"><Metahttp-equiv= "X-ua-compatible"content= "Ie=edge,chrome=1"><Metaname= "Viewport"content= "Width=device-width, initial-scale=1.0"><title>Image mosaic Blur effect based on HTML5 canvas-how to ask</title><Linkrel= "stylesheet"type= "Text/css"href= "1/css/normalize.css" /><Linkrel= "stylesheet"type= "Text/css"href= "1/css/default.css"><styletype= "Text/css">. Thumb{Margin-left:5em;}. Thumb img{Max-width:400px;}</style></Head><Body><Divstyle= "width:760px;margin:0px Auto"><H2>Image mosaic Blur effect based on HTML5 canvas how to ask</H2><ahref= "Http://hovertree.com">Home</a> <ahref= "Http://hovertree.com/hvtart/bjae/160ced36cb3a6a86.htm">Original</a> <ahref= "Http://hovertree.com/texiao/html5/1/tupianmohu.rar"Target= "_self">Download</a><ahref= "http://hovertree.com/texiao/">Special Effects Library</a><BR/></Div><Divclass= "Container"><Divclass= "Content bgcolor-8"><Pclass= "Center">change the degree of ambiguity<inputtype= "Range"min= "4"Max= "+"value= "6"ID= "Range" /><spanID= "Output">6</span></P><Divclass= "thumb"><imgsrc= "1/img/1.jpg"ID= "Dolly1" /><imgsrc= "1/img/2.jpg"ID= "Dolly2" /><imgsrc= "1/img/3.jpg"ID= "Dolly3" /></Div></Div></Div><Scriptsrc= "Http://hovertree.com/texiao/html5/1/js/close-pixelate.js"></Script><Script>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,Ten) Res=Math.floor (Res/ 2) * 2Res=Math.max (4, Math.min ( -, RES)) Output.textcontent=Res//Console.log (res);pixelopts=[{resolution:res}]pixeldolly1.render (pixelopts) pixeldolly2.render (pixelopts) Pixeldolly3.render (pixelOpts)} , false)}</Script></Body></HTML>
Download: Http://hovertree.com/texiao/html5/1/tupianmohu.rar
Transferred from: http://hovertree.com/hvtart/bjae/160ced36cb3a6a86.htm
Web Front end Rollup: http://www.cnblogs.com/jihua/p/webfront.html
Image mosaic Blur effect based on HTML5 canvas implementation
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
