Image mosaic Blur effect based on HTML5 canvas implementation

Source: Internet
Author: User
Tags rar

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.