POPSブログ

SVG.js colorMatrix シミュレーション

393

  Category:  javascript2016/10/01 pops 

SVG colorMatrixは直感的に判り難いのでシミュレーション形式で画像加工出来る様に工夫してみました。svg.filter.js(v2.0.2)を使用しています。ローカル画像で処理出来ますので加工の結果が判り易いと思います。

 

SVG.js colorMatrix シミュレーションテスト


DEMO 画像のcolorMatrixフイルター加工 シミュレーション

ご注意、Chrome.Firefox.IE11等、モダンブラウザでご覧ください(Chrome推奨)。

DEMO-043

sum

 

シミュレーション結果の例

上記、シミュレーションページで実際に加工したものを掲載します。

 

加工前の画像

car

colorMatrix加工後の画像1、(黒背景)

シミュレーションをテキトウにしたものですが、意外と簡単に加工できます。

 


var image=draw.image('/main/images/toyota_car10.jpg').size(640,300).center(320,150)
.filter(function(add) {
	//matrix
	add.colorMatrix('matrix','0.07 0.42 0.42 0 0, 0.42 0.48 0.42 0 0, 0.42 0.42 0.23 0 0, 0.64 0.64 0.64 0.36 0')
})

colorMatrix加工後の画像2、(黒背景)

 


var image2=draw.image('/main/images/toyota_car10.jpg').size(640,300).center(320,150)
.filter(function(add) {
	//matrix
	add.colorMatrix('matrix','0.48 0 0 0 0, 0 0.48 0 0 0, 0 0 0.48 0 0, 0.52 0.52 0.52 0.71 -0.58')
})

colorMatrix加工後の画像3、(白背景)

 


var image3=draw.image('/main/images/toyota_car10.jpg').size(640,300).center(320,150)
.filter(function(add) {
	//matrix
	add.colorMatrix('matrix','0.381 0.425 0.374 0 -0.18, 0.241 0.695 0.064 0 -0.18, 0.241 0.475 0.284 0 -0.18, 0 0 0 1 0')
})

 

基礎的なSVGのcolorMatrixに関する知識が必要ですので、下記サイトの解説記事などを参考にして下さい。

【参考】www.h2.dion.ne.jpの記事: svg要素の基本的な使い方まとめ、画像効果

【参考】hakuhin.jpの記事: カラーマトリックスフィルタについて

【参考】triple-underscoreの記事: (SVG)1.1 第2版 /15 フィルタ効果


 

プラグインsvg.filter.jsのFilter処理については「前ページ」を参照ください。

【参照】当方の記事: SVG.js プラグインsvg.filter.jsのFilter処理

 

簡単ですが、以上です。

 


[ この記事のURL ]


タグ:javascript , SVG

 

ブログ記事一覧

年別アーカイブ一覧



[1]