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.

PIXASTIC

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

(function ($) {

    $(window).load(function () {

   $(".desaturate").each(function (index, obj) {

      $(this).pixastic("desaturate").mouseenter(function (e) {

           Pixastic.revert(this);

      });

   }).mouseleave(function (e) {

       $(this).pixastic("desaturate").mouseenter(function (e) {

           Pixastic.revert(this);

       });

   });

                });

})(jQuery);

    </script>

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.

CSS3

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.

Style:

    .desaturate {

        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 */

    }

    .desaturate:hover {

        filter: none;

        -webkit-filter: none;

        -ms-filter: none;

    }

Body:

<svg style="width: 0; height: 0">

<filter id="desaturate"><feColorMatrix type="saturate" values="0"/></filter>

</svg>

<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

I have been playing around with the pixastic.js javascript image manipulation library lately and really enjoying the results. The need for an image manipulation library arose when I needed some image effects to happen dynamically on the Imajin Products homepage that I am currently developing.

I needed some way of dynamically putting a grayscale filter on an image on hover over and I was up in the air between processing.js and pixastic.js. I decided on pixastics.js because I read somewhere that processing.js was not specifically designed for image manipulation and I figured I would go with the more specialized one because I figured would have more image effects and be more efficient.