[Turn] Small tip: Use CSS to convert a picture into a blur (frosted glass) effect---Zhang Xin Xu

by Zhangxinxu from http://www.zhangxinxu.com
This address: http://www.zhangxinxu.com/wordpress/?p=3804

Last summer, when I wrote "Little tip: Using CSS to convert pictures to black and white," the model and content of this article actually went on a similar route. Css3→svg→ie filter → canvas .

Some time ago, iOS7 is not a melon is not ripe on the ground, and then picked up a lot of melon, and then began a variety of discussions at home and abroad, from the interface to animation, from compatibility to implementation. Among them, "Mao Glass" a bang Bang was born, some love toss riders people can figure out how to use CSS to achieve, domestic (do not remember), foreign also have (for example, CSS tricks this article "Lurry Transparent Header Effect from IOS7 In CSS ") ~

Although the title of this article also has "Mao Glass" two words, sorry, is "three words". However, it is not to introduce how to achieve the effect of glass, but to introduce the basis of the effect of the glass-fuzzy. Haha, forgive me trickery, borrow "Mao glass" word, stained with hot air, fragrance, bee flying butterfly dance, onlookers Bo master.

This article is very simple, is the image blur effect realization.

CSS3 Blur Filter Implementation

Test code as follows:

. blur {        -webkit-filter:blur (10px);/* Chrome, Opera *       /-moz-filter:blur (10px);        -ms-filter:blur (10px);                Filter:blur (10px);    }

The relevant HTML code is as follows:

If you have a browser on hand that is shown in green:

You can really click here: CSS3 blur filter and photo blur

You can see the blur comparison that is shown at the beginning of a similar article.

Other browsers, such as Firefox, have not yet supported CSS3 filter . Of course, it is also possible to achieve (for example) the effect of blurring a photo on a Firefox 24 browser. You can use the SVG blur filter.

SVG Filter Implementation

No matter what method Daoteng, make a code as follows, and blur.svg the full name of the SVG file:

<?xml version= "1.0" encoding= "Utf-8"? ><! DOCTYPE svg public "-//W3C//DTD svg 1.1//en" "Http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" ><svg version= " 1.1 "      xmlns=" http://www.w3.org/2000/svg "     xmlns:xlink=" Http://www.w3.org/1999/xlink "     xmlns:ev=" http ://www.w3.org/2001/xml-events "          baseprofile=" full ">     <defs>        <filter id=" blur ">            <fegaussianblur stddeviation= "Ten"/>        </filter>    </defs></svg>

The above Code Red highlights the addition of the filter code (other code dreamweaver automatically generated, in fact, as long as one line is enough ~).

The following CSS call code:

Filter:url (Blur.svg#blur); /* FireFox, Chrome, Opera */

Then, the effect comes out. If your browser is firefox25-, you can click here: SVG filter to achieve photo blur demo

IE10 and IE11 and later ie11+ are all supported for SVG filters, but this demo is not valid under these browsers, why?

It seems that because it does not support the use of CSS directly in filter: url the wording, in fact, to achieve IE10, IE11 under the fuzzy effect, is also possible, is the applicability of the point, the picture to write the SVG code, similar to the following:

<?xml version= "1.0" encoding= "Utf-8"? ><! DOCTYPE svg public "-//W3C//DTD svg 1.1//en" "Http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" ><svg version= " 1.1 "      xmlns=" http://www.w3.org/2000/svg "     xmlns:xlink=" Http://www.w3.org/1999/xlink "     xmlns:ev=" http ://www.w3.org/2001/xml-events "          baseprofile=" full ">     <defs>        <filter id=" blur ">            <fegaussianblur stddeviation= "Ten"/>        </filter>    </defs>    <image xlink:href= " Mm1.jpg "x=" 0 "y=" 0 "height=" 191 "width=" 265 "filter=" url (#blur) "/></svg>

Then, SVG is loaded as a background image:

. blur {    background-image:url (blur.svg);}

You can ha ~ ~

Don't forget the IE browser

IE6?-IE9 Browser can be filter implemented with the help of IE blur filter, the following CSS:

As a result, all the major browsers have shown their faces, and all of them have the potential to achieve blurred images.

So, this big comprehensive:

. blur {    filter:url (Blur.svg#blur);/* FireFox, Chrome, Opera *        /-webkit-filter:blur (10px);/* Chrome, Opera */
   -moz-filter:blur (10px);        -ms-filter:blur (10px);                Filter:blur (10px);        Filter:progid:DXImageTransform.Microsoft.Blur (pixelradius=10, Makeshadow=false); /* IE6~IE9 */}

As for IE10, IE11 Browser, underachievement's chicken ribs, I do not say anything about it ~ if you cling to the two big chicken row, you can try canvas .

Canvas Grand Unification

There is a method in the canvas getImageData , you can get the information of each picture pixel point, we can according to the specific algorithm, these points of information conversion, you can use a variety of image effects. For example, a gray effect, such as a contrast effect, or some complex image blending effect (see below):

or the Blur effect (Gaussian blur) to be introduced here.

The "Gaussian blur algorithm" can be found in the "Gaussian fuzzy algorithm" of teacher Ruan, which involves a normal distribution. Can be seen, even if the design, or toss CSS, is also a requirement for mathematics ha.

For canvas The Gaussian blur, there must be predecessors have written related methods, I searched the next, this JS is pretty good, Stackblur.js, the original demo address of JS is: http://www.quasimondo.com/ Stackblurforcanvas/stackblurdemo.html

This method can realize the Gaussian blur effect of the picture, and does not depend on any other JS frame, the general usage is as follows:

Stackblurimage (sourceImageId, Targetcanvasid, radius, bluralphachannel);

which

• sourceImageIDThe image to be blurred id , the default is to hide the picture;
• targetCanvasIDThat represents the element to display the blurred picture canvas id ;
• radiusRepresents the radius size of the blur. However, according to my comparison test, it seems that the radius blur value of the filter filter in CSS is not a 1:1 match, but it is somewhat similar. that is, the radius of the 2:1 blur is 20px approximate to the blur filter value set in the CSS 10px ;
• blurAlphaChannelis a Boolean property that indicates aplha whether the transparent channel is blurred, indicating that it true should be blurred.

So, with the help of this JS file, we can achieve ie9+ browser image blur effect, as for IE6~IE8, continue to use IE private filter blur filter, so, Jiangshan Unified, peacefulness!

You can really click here: IE css blur filter +canvas Gaussian blur implementation picture Blur Demo

So, the chicken IE11 browser immediately into the thigh ~ ~ ~

Alexander Mankuta also wrote an implementation canvas of the fuzzy filter method this year, the biggest feature is that you can control the blur of a particular image area, for example, the middle is clear, the surrounding blurred, or up and down blurred, the middle clear. As follows:

You are interested to click here to view learning.

Original article, reprint please indicate from Zhang Xin Xu-Xin space-Xin Life [http://www.zhangxinxu.com]
This address: http://www.zhangxinxu.com/wordpress/?p=3804

(End of this article)

If you feel that the content of this article

[Turn] Small tip: Use CSS to convert a picture into a blur (frosted glass) effect---Zhang Xin Xu