Image Mosaic blur effects based on HTML5 Canvas,

Source: Internet
Author: User

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

Related Article

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.