EaselJS（CreateJS）のフィルターを試す

準備

こちらのページ からソースコードをダウンロードしておくか、CDNから読み込んでおきましょう。

www.createjs.com

また、ドキュメントは こちら にまとまっているので確認しておくと良いと思います。

www.createjs.com

JavaScript

1. ステージのインスタンスを作成
2. ビットマップのインスタンスを作成
3. ステージにビットマップを配置
4. ビットマップにフィルターに配列を渡す（配列の要素はフィルターのインスタンス）

という感じです。

(function(win, doc) {

    "use strict";
    
    var brightness = 0,
        contrast = 0,
        saturation = 0,
        hue = 0,
        blur = 0,
        filter;
        
    
    loadImage();
    
    function loadImage() {
        var queue = new createjs.LoadQueue(false),
            manifest = [
                {
                    id  : "img",
                    src : "http://jsrun.it/assets/S/d/o/2/Sdo2p.jpeg"
               }
            ];
        
        // 第2引数はロードを始めるか否か
        queue.loadManifest(manifest, true);
                
        // すべて読み込みが終わったタイミングで発火
        queue.on("complete", handleComplete);

        function handleLoad(evt) {
            // 読み込みが完了した画像
            // console.log(evt.item);
        }
        
        function handleComplete(evt) {
            var canvas = doc.getElementById("canvas"),
                // ステージを作成
                stage = new createjs.Stage(canvas),
                // ビットマップを作成
                bitmap = new createjs.Bitmap(queue.getResult("img"));
            
            // ステージのサイズを設定
            stage.canvas.width = window.innerWidth;
            stage.canvas.height = window.innerHeight;
            
            // bitmap.scaleX = bitmap.scaleY = 0.5;
            
            bitmap.filters = [
                new createjs.ColorMatrixFilter(new createjs.ColorMatrix(brightness, contrast, saturation, hue))
               //  new createjs.BlurFilter(15, 15, 2)
            ];
            
            bitmap.cache(0, 0, bitmap.getBounds().width, bitmap.getBounds().width);
            
            // ステージにビットマップを配置
            stage.addChild(bitmap);

            // FPSを設定
            createjs.Ticker.setFPS(5);
            
            createjs.Ticker.addEventListener("tick", function() {

                brightness = doc.getElementById("brightness").value;
                contrast = doc.getElementById("contrast").value;
                saturation = doc.getElementById("saturation").value;
                hue = doc.getElementById("hue").value;
                blur = doc.getElementById("blur").value;
                filter = [new createjs.ColorMatrixFilter(new createjs.ColorMatrix(brightness, contrast, saturation, hue))];

                if (blur) {
                    filter.push(new createjs.BlurFilter(blur, blur, 1));
                }
                
                bitmap.filters = filter;          
                bitmap.cache(0, 0, bitmap.getBounds().width, bitmap.getBounds().width);
                
                // ステージにビットマップを配置
                stage.addChild(bitmap);

                stage.update();
            });
        }
    }
    
})(this, document);

DEMO