このトピックでは、フラッシュを使用せずにWebページ上の画像にガウスぼかし効果を追加する方法を説明します。 1年前に記事を書く予定でしたが、驚いたことに、誰も私に先んじていませんでしたが、このトピックはWebデザインの観点とクライアント開発の観点の両方から非常にシンプルで興味深いものです。 エフェクトを作成するために、ブラウザの最近のすべてのバージョンで動作する、すでに人気のあるSVGテクノロジーを使用します。 IE8では、Microsoft製品でのみ機能するCSSフィルター（特にぼかし ）を使用します。 手始めに、 ここで最終バージョンに慣れることをお勧めします（画像の上にカーソルを合わせます）。 スクリプトはjQueryプラグインとして提示されますが、jQueryの外部で使用するためにスクリプトを引き出すのは簡単です。
明らかに、作品の目的は画像をぼかすだけでなく、そのぼけをアニメーション化することでもあります。
最も単純な例から、ぼかしの強度はfeGaussianBlurタグのstdDeviation属性に依存することがわかります。
< svg width ="100%" height ="100%" version ="1.1"
xmlns ="http://www.w3.org/2000/svg" >
< defs >
< filter id ="Gaussian_Blur" >
< feGaussianBlur in ="SourceGraphic" stdDeviation ="3" />
</ filter >
</ defs >
< ellipse cx ="200" cy ="150" rx ="70" ry ="40"
style ="fill:#ff0000;stroke:#000000;
stroke-width:2;filter:url(#Gaussian_Blur)" />
</ svg >
* This source code was highlighted with Source Code Highlighter .
（ ここから取られたコード）。
まず、この属性をアニメーション化しようとしましたが、判明したように、属性値は整数にしかできません。つまり、アニメーションは「ぴくぴく」しています。 スムーズなアニメーションの錯覚を作成するには、非常に単純なロジックに従います。
2つのレイヤーを作成します。1つ目はぼやけた画像（SVG）、2つ目は元の画像（通常のhtml img）で、その透明度を変更して完全にアニメーション化します。 要素の相対的な配置に関する問題を回避するために、要件が設定されました。元の画像は、たとえば、ぼやけた画像が追加されるspanタグなどのコンテナに含まれている必要があります。
< span class ="blurImageContainer" >
< img class ="blurImage" src ="a.jpg" >
</ span >
* This source code was highlighted with Source Code Highlighter .
まず最初に、SVGでの作業を便利にするためにオブジェクトが作成されました。
複数のsvg要素を正しく作成するために必要なのはそれだけです。var SVG = {
//
svgns: 'http://www.w3.org/2000/svg' ,
xlink: 'http://www.w3.org/1999/xlink' ,
// svg (name - , attrs - )
createElement: function (name, attrs){
var element = document .createElementNS(SVG.svgns, name);
if (attrs) {
SVG.setAttr(element, attrs);
}
return element;
},
// (element - SVG-)
setAttr: function (element, attrs) {
for ( var i in attrs) {
if (i === 'href' ) { // href xlink
element.setAttributeNS(SVG.xlink, i, attrs[i]);
} else { //
element.setAttribute(i, attrs[i]);
}
}
}
}
* This source code was highlighted with Source Code Highlighter .
同じ要素でプラグインを繰り返し使用する際のミスを防ぐために、ぼかしのある要素を削除するたびに、何らかの方法でそれを識別する必要があります。 残念ながら、この要素はsvg要素自体に追加できませんでしたが、IDを割り当てることが判明しました。
これにより、画像が参照するぼかしフィルターのIDの競合を回避することもできます。var blurredId = Math.random(); //
...
$ this .children( '[id^="blurred"]' ).remove(); //
...
svg = SVG.createElement( 'svg' , {
...
id: 'blurred' +blurredId
});
* This source code was highlighted with Source Code Highlighter .
その結果、次のコードを取得します。
var svg, filterId, filter, gaussianBlur, image;
svg = SVG.createElement( 'svg' , { // SVG
xmlns: SVG.svgns,
version: '1.1' ,
//
width: imgWidth,
height: imgHeight,
id: 'blurred' +blurredId
});
filterId = 'blur' +blurredId; // ; image
filter = SVG.createElement( 'filter' , { //
id:filterId
});
gaussianBlur = SVG.createElement( 'feGaussianBlur' , { //
'in' : 'SourceGraphic' , //in — ; ,
stdDeviation: args.deviation // (int)
});
image = SVG.createElement( 'image' , { //,
x: 0,
y: 0,
//,
width: imgWidth,
height: imgHeight,
href: imgSrc,
style: 'filter:url(#' +filterId+ ')' //
});
filter.appendChild(gaussianBlur); //
svg.appendChild(filter); // SVG
svg.appendChild(image); // SVG
this .appendChild(svg); // SVG span ( this )
* This source code was highlighted with Source Code Highlighter .
このようなSVGを生成します：
< svg xmlns ="http://www.w3.org/2000/svg" version ="1.1" width ="144" height ="144" id ="blurred0.9918661566916853" >
< filter id ="blur0.9918661566916853" >
< feGaussianBlur in ="SourceGraphic" stdDeviation ="2" ></ feGaussianBlur >
</ filter >
< image x ="0" y ="0" width ="144" height ="144" href ="a.jpg" style ="filter:url(#blur0.9918661566916853)" ></ image >
</ svg >
* This source code was highlighted with Source Code Highlighter .
それでは、IEの初期バージョンをぼかし始めましょう。 前述のように、ぼかしフィルターが使用されます。 結果として生じるぼかしはガウスではなく、見た目もよくありませんが、それほど重要ではありません。 同様の原則に従います。2つ目の画像を作成し、元の画像の下に配置し、ぼかします。
$img.clone() //
.css({ //
// ; ,
filter: 'progid:DXImageTransform.Microsoft.Blur(pixelradius=' + args.deviation*2 + ')' ,
// ,
top: -args.deviation*2,
left: -args.deviation*2,
//- ;
width: imgWidth,
height: imgHeight,
})
.attr( 'id' , 'blurred' +blurredId)
.appendTo( this );
* This source code was highlighted with Source Code Highlighter .
スクリプトをjQueryプラグインとして設計し、次のように使用します。
jQuery(window).load( function ($){ // , load ready
$( '.blurImageContainer .blurImage' ).css({opacity: 0}); //
$( '.blurImageContainer' ).gaussianBlur({
deviation: 3, //
imageClass: 'blurImage' //
});
$( '.blurImageContainer' ).hover( function (){
$( '.blurImage' , this ).animate({opacity: 1}, 500);
}, function (){
$( '.blurImage' , this ).animate({opacity: 0}, 500);
});
});
* This source code was highlighted with Source Code Highlighter .
ご清聴ありがとうございました。
不正確または欠点を報告してください。
参照：
finom.ho.ua/blur-例
finom.ho.ua/blur/jquery.gaussian-blur.js-プラグインコード
www.w3.org/TR/SVG/filters.html-SVGのフィルターの仕様
PSその過程で、写真だけでなく、HTML全体もぼかすことを学ぶ試みがなされました。 htmlをsvgに埋め込むのは難しくないという事実にもかかわらず（ちょうどそのように）、グラフィックフィルターを適用することはできませんでした。 親愛なるhabraの人々がこれを行う方法のアイデアを手伝ってくれたら嬉しいです。