javascript - easeljsセピアとグレースケール

Question

EaselJSを使用してJavaScriptを介して画像操作を行うことを検討していますが、このライブラリを使用して画像にセピアとグレースケールフィルターを適用する方法の例はありますか？ http://www.createjs.com/#!/EaselJS

ご参考までに、私は多くの代替ライブラリを検討してきましたが、ブラウザ間でうまく機能するものはないようです。

Answer 1

createjs.ColorMatrixFilter() を使用して、ビットマップにカラー フィルターを適用します。

グレースケールとセピアのフィルターは次のとおりです。

var Grayscale = new createjs.ColorMatrixFilter([
        0.30,0.30,0.30,0,0, // red component
        0.30,0.30,0.30,0,0, // green component
        0.30,0.30,0.30,0,0, // blue component
        0,0,0,1,0  // alpha
]);
myEaselBitmap.filters = [Grayscale];


var Sepia = new createjs.ColorMatrixFilter([
    0.39, 0.77, 0.19, 0, 0, // red component
    0.35, 0.68, 0.17, 0, 0, // green component
    0.27, 0.53, 0.13, 0, 0, // blue component
    0, 0, 0, 1, 0  // alpha
]);
myEaselBitmap.filters = [Sepia];