Image Mosaic blur effects based on HTML5 Canvas,

Image Mosaic blur effects based on HTML5 Canvas,

Please click the following url: http://hovertree.com/texiao/html5/1.htm Effect


I. Open Doors
Inspired by American portrait painter Chuck Close, this script converts an image into pixels using the HTML5 canvas Element, which is basically a simple demonstration of the canvas imageData function.

This script is currently available on GitHub, where you can download the script and example. View pixel resources on GitHub


Ii. Options
This method accepts an array of objects, each of which has a set of options.
Resolution: The pixel distance between rendered pixels. required.
Shape: the shape of pixels. The following options are accepted: square, circle, and diamond. Optional. The default value is square.
Size: The pixel size value of the rendered pixel. Optional. The default value is resolution.
Offset: offset pixel. Optional. The default value is 0. It can be a single value 15 to achieve diagonal offset, or an array or an object with the X/Y keyword to achieve offset:
[15, 5] or {x: 15, y: 5 }.
Alpha: A small value, indicating the transparency of rendering. Optional. The default value is 1.



Iii. Sample Code

To pixel images, first call the following script:
<Script type = "text/javascript" src = "http://hovertree.com/texiao/html5/1/js/close-pixelate.js"> </script>
Then, call closePixelate. More specifically:
Image dom. closePixelate (option parameter)

This script can be applied to various types of images. According to HTML5 specifications, the browser prohibits the use of getImageData () on any externally hosted images. However, thanks to John Schulz's great contribution, by using the getImageData API of Max Novakovic, further pixel processing has a built-in method to solve this security feature.



You can use the closePixelate method and image in your script to control the image output through a set of array options. Sample Code:
Document. getElementById ('pixelexample2'). closePixelate ([
{Resolution: 24}
]);


The html code is as follows:

<! Doctype html> 
Download: http://hovertree.com/texiao/html5/1/tupianmohu.rar