Attēlu desaturācija, izmantojot pārlūkprogrammu
Viens no plaši izplatītiem lapu estētikas efektiem attēlu galerijās, mākslinieku protfolio, ir melnbalts attēls, uz kura uzbraucot ar pelīti, tas paliek krāsains.
Šāds efekts parasti tiek panākts, izmantojot divus attēlus, no sākuma tiek attēlots melnbaltais attēls, pēc tam, izmantojot CSS vai jQuery (jaukākam efektam), tiek attēlots krāsains attēls. Skaists paraugs, kā to panākt, ir atrodams webdesignerwall.com.
Slinkums gan ir cilvēces dzinējspēks un tā kā man bija absolūts slinkums taisīt divas attēla versijas (melnbalto un krāsaino), tad meklēju iespējas kā to izdarīt, izmantojot vienu attēlu.
Pirmais variants, ko izmēģināju, bija pixastic javascript bibliotēka.
Most of the Pixastic actions work by accessing the pixel data of the image and manipulating the image on pixel by pixel basis. This is done via the getImageData() / putImageData() methods available on the HTML5 canvas element. The methods are currently only fully supported by Firefox, Opera and Safari with a recent WebKit nightly build. The core Pixastic functions take care of creating a canvas element, draws the image on this element and retrieves the image data. This data is then passed on to the relevant action which does "its thing" before returning the data. Finally, the modified data is put back into the canvas and the process is complete.
Tātad principā pixastic sagaida, kamēr ielādējas attēls, pēc tam to pikseli pa pikselim modificē. Pixastic atbalsta daudz dažādas attēla modifikācijas iespējas, tai skaitā, Blur, Brightness/Contrast, Crop, Desaturate, Emboss, Flip Horizontally, Flip Vertically, Glow, Sepia, Sharpen.
Atgriežoties pie attēla desaturācijas, izmantojot pixastic, you.arenot.me apraksta to detaļās un modificējot viņa piedāvāto kodu, iznāca kaut kas šāds (desaturēts tiek attēls ar klasi "desaturate"):
<script type="text/javascript">
$(window).load(function () {
$(".desaturate").each(function (index, obj) {
$(this).pixastic("desaturate").mouseenter(function (e) {
}).mouseleave(function (e) {
$(this).pixastic("desaturate").mouseenter(function (e) {
Principā vienīgā problēma šeit ir tā, ka attēlam ir jābūt pilnībā ielādētam pirms viņu var pārveidot. Ja lapā ir viens attēls, tad tā nav problēma, bet tiklīdz lapā ir vairāk attēlu, kas jāpārveido, tā sākas attēla "mirgošana" - vispirms acs paspēj noķert krāsaino attēla versiju un tikai pēc tam tā pārveidojas melnbalta.
Pozitīvais: šāds risinājums strādā Firefox, Opera, Safari, Chrome jaunākajās versijās. Internet Explorer strādā desaturācija, bet nestrādā krāsu atjaunošana uz hover.
Otrs variants ir, izmantot CSS3 piedāvātās opcijas, kas gan pagaidām vēl pa lielam nav plaši atbalstītas.
Pirmais filtrus ieviesa Microsoft un šādi filtri Internet Explorerī dzīvo jau no 5 versijas. Nevajag pat CSS3, varam attēlu vienkārši desaturēt ar klases palīdzību:
.desaturate{ filter: gray; /* IE 5+ */ }
Jaunajos IE pamainījās sintakse un tagad desaturācija tiek iegūta šādā veidā:
-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(grayscale=1)"; /* new IE */
Savukārt World Wide Web Consortium pavisam nesen publicēja Editor's Draft rekomendācijām par tēmu "Filter Effects". Working Draft šobrīd ir ar statusu Upcoming.
Filter Effects allows graphics filters to be applied to an element (after it has been rendered, but before it has been composited, see Compositing and Blending). Filters can blur an element, add a shadow, modify colors, increase contrast, add a “texture,” etc. The module defines a number of common graphics effects, but also allows to use filters written in OpenGL (OpenGL ES Shading Language). This module is made in cooperation with SVG.
Šobrīd filtru efektus atbalsta Google Chrome un Safari jaunākās versijas.
.desaturate { -webkit-filter: grayscale(1); /* Chrome 18+, Safari 6.0+ */ }
Firefox filtru efektus vēl neatbalsta, tāpat arī Opera. Bet gan Opera, gan Firefox atbalsta SVG filtrus. Firefox pie tam ļauj SVG filtrus piemērot HTML elementiem. Opera gan šādas vaļības nepieļauj, līdz ar to, atmetot Operas atbalstu, filtrus ir salīdzinoši viegli uzklāt pārējām pārlūkprogrammām.
filter: url(#desaturate); /* Firefox 4+ */
filter: gray; /* IE 5+ */
-webkit-filter: grayscale(1); /* Chrome, Safari */
-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(grayscale=1)"; /* new IE */
<svg style="width: 0; height: 0">
<filter id="desaturate"><feColorMatrix type="saturate" values="0"/></filter>
<img src="ATTĒLA SAITE" class="desaturate" />
Secinājums: ja nav nopietnu iebildumu Operas atbalstam, var mēģināt izbraukt uz filtru efektiem, lai arī vēl šī tēma ir pagalam nenopietna.
Par šo pašu problēmu var lasīt angliski: http://demosthenes.info/blog/532/Convert-Images-To-Black--White-With-CSS
Un var lasīt krieviski: http://bolknote.ru/2012/03/14/~3605/#27
