画像をグレースケールなどに変換「Colorimazer」
当ページのリンクには広告が含まれています。
スポンサーリンク
画像をグレースケールなどに変換するプラグイン「Colorimazer」を紹介します。
jQueryプラグイン「Colorimazer」
このプラグインを使えば、Photoshopなどの画像編集・加工ソフトを使わなくても！画像を指定するだけで簡単にグレースケールに変換することができます。
また、画像変換はグレースケール（grayscale）だけでななく、inverse、polarize、opacity……といったオプションも用意されているので、画像にさまざまな効果を加える事ができます。
スポンサーリンク
デモでオリジナル画像と変換した画像を比較してみてください。
ソース（HTML + jQuery）
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta name="description" content="Colorimazerのデモでーす。">
<title>Colorimazer - jQuery Plugin Demo</title>
</head>
<body>
<h2>オリジナル画像</h2>
<div>
<img src="img/demo.png" id="original" />
</div>
<h2>グレースケール</h2>
<div>
<img src="img/demo.png" id="gray" />
</div>
<h2>Multiply</h2>
<div>
<img src="img/demo.png" id="colorizemultiply" />
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="jquery.colorimazer.js"></script>
<script>
$(document).ready(function(){
$("#gray").grayscale();
$("#colorizemultiply").colorize({ mode: "multiply", g: 25 });
});
</script>
</body>
</html>
スポンサーリンク