एसवीजी के साथ गाऊसी ब्लर

इस विषय में, मैं यह बताना चाहूंगा कि एक फ्लैश का उपयोग किए बिना वेब पेज पर छवियों के लिए गॉसियन ब्लर प्रभाव कैसे जोड़ा जाए। मैंने एक साल पहले एक लेख लिखने की योजना बनाई, और, मेरे महान आश्चर्य के लिए, कोई भी मुझसे आगे नहीं निकला, हालांकि यह विषय वेब डिज़ाइन के दृष्टिकोण से और ग्राहक विकास के दृष्टिकोण से काफी सरल और दिलचस्प है। प्रभाव बनाने के लिए, हम पहले से ही लोकप्रिय एसवीजी तकनीक का उपयोग करेंगे, जो ब्राउज़रों के सभी हाल के संस्करणों में काम करता है। IE8 के लिए- हम CSS फ़िल्टर (विशेष रूप से ब्लर ) का उपयोग करेंगे, जो केवल Microsoft उत्पादों में काम करते हैं। शुरुआत के लिए, मेरा सुझाव है कि आप यहां अंतिम संस्करण के साथ खुद को परिचित करें (किसी भी छवि पर होवर करें)। स्क्रिप्ट को एक jQuery प्लगइन के रूप में प्रस्तुत किया गया है, लेकिन इसे बाहर jQuery के उपयोग के लिए खींचना आसान है।

जाहिर है, काम का उद्देश्य न केवल तस्वीर को धुंधला कर रहा है, बल्कि उस धुंधला को भी एनिमेट कर रहा है।

सबसे सरल उदाहरण से, हम देखते हैं कि कलंक तीव्रता feGaussianBurur टैग में 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 .

( यहां से लिया गया कोड)।
सबसे पहले, मैंने इस विशेषता को चेतन करने की कोशिश की, लेकिन जैसा कि यह निकला, विशेषता मान केवल पूर्णांक हो सकते हैं, अर्थात्, एनीमेशन "चिकोटी" निकला। चिकनी एनीमेशन का भ्रम बनाने के लिए, हम एक बहुत ही सरल तर्क का पालन करेंगे।



हम दो परतें बनाते हैं: पहला एक धुंधली छवि (एसवीजी) है, दूसरा मूल छवि है (नियमित एचटीएमएल आईएमजी), और हम इसकी पारदर्शिता को बदलते हैं, जो पूरी तरह से एनिमेट करता है। एक दूसरे के सापेक्ष तत्वों की स्थिति के साथ समस्याओं से बचने के लिए, एक आवश्यकता निर्धारित की गई थी: मूल छवि कंटेनर में निहित होनी चाहिए, उदाहरण के लिए, स्पैन टैग में, जिसमें एक धुंधली तस्वीर जोड़ी जाएगी।

< span class ="blurImageContainer" >
< img class ="blurImage" src ="a.jpg" >
</ span >

* This source code was highlighted with Source Code Highlighter .

सबसे पहले, एसवीजी के साथ सुविधाजनक काम के लिए एक ऑब्जेक्ट बनाया गया था:

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 तत्वों को सही ढंग से बनाने की आवश्यकता है।

एक ही तत्व पर प्लगइन के बार-बार उपयोग में गलतियों को रोकने के लिए, हर बार हम तत्व को धब्बा के साथ हटा देंगे, और इसके लिए हमें किसी तरह इसे पहचानने की आवश्यकता है। दुर्भाग्य से, तत्व को स्वयं svg तत्व में नहीं जोड़ा जा सकता है, लेकिन यह एक आईडी को असाइन करने के लिए निकला है:

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 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 .

अब आईई में शुरुआती संस्करणों को धुंधला करना शुरू करते हैं। जैसा कि ऊपर उल्लेख किया गया है, ब्लर फिल्टर का उपयोग किया जाएगा। परिणामी धुंधला काफी गाऊसी नहीं है, और यह बहुत अच्छा नहीं लगता है, लेकिन यह इतना महत्वपूर्ण नहीं है। हम एक समान सिद्धांत का पालन करते हैं: एक दूसरी छवि बनाएं, इसे मूल छवि के नीचे रखें, इसे धुंधला करें।

$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 - एसवीजी में फिल्टर के विनिर्देश

पुनश्च इस प्रक्रिया में, न केवल चित्रों को धुंधला करने के लिए सीखने का प्रयास किया गया, बल्कि html के पूरे टुकड़े भी। इस तथ्य के बावजूद कि svg (ठीक उसी तरह) में html को एम्बेड करना मुश्किल नहीं है, ग्राफिक फ़िल्टर लागू करना संभव नहीं था। मुझे खुशी होगी अगर प्रिय हैबरा लोग इस विचार के साथ मदद करें कि यह कैसे करना है।