Image.toGreyscale 0.1

Methods for converting a locally hosted image to greyscale and back again!

This is a mootools plugin port of an original piece of code seen here, all credit goes to them!



Details

Author
Matthew Wells
Current version
0.1
GitHub
ninjapenguin/mootools-img.toGreyscale
Downloads
4071
Category
Utilities
Tags
Report
GitHub Issues

Releases


Dependencies

  • _self_/_current_: core/1.2.4:*

How to use

JS
// Attached on load as we need the images to of loaded!
window.addEvent('load', function(){

    $$('img.coloured-image').each(function(element){

        // transform the image
        element.toGreyscale();

        // element.toSaturated will return image to saturated version if previously de-staurated with element.toGreyscale
        element.addEvent('mouseover', function(ev){
            this.toSaturated();
        })
        element.addEvent('mouseout', function(ev){
            this.toGreyscale();
        })
    })
})

Known Issues

Non-IE browsers must support the canvas tag

Will only work on locally served images from the same domain (due to browser same origin policies)


Discuss

A note on comments here: These comments are moderated. No comments will show up until they are approved. Comments that are not productive (i.e. inflammatory, rude, etc) will not be approved.

Found a bug in this plugin? Please report it this repository's Github Issues.

blog comments powered by Disqus