今日の人気記事

まだデータがありません。

画像をグレースケールなどに変換「Colorimazer」

当ページのリンクには広告が含まれています。

スポンサーリンク

画像をグレースケールなどに変換するプラグイン「Colorimazer」を紹介します。

jQueryプラグイン「Colorimazer」

このプラグインを使えば、Photoshopなどの画像編集・加工ソフトを使わなくても!画像を指定するだけで簡単にグレースケールに変換することができます。

また、画像変換はグレースケール(grayscale)だけでななく、inverse、polarize、opacity……といったオプションも用意されているので、画像にさまざまな効果を加える事ができます。

スポンサーリンク

デモでオリジナル画像と変換した画像を比較してみてください。

「Colorimazer」のデモ

ソース(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>
スポンサーリンク

関連記事(一部広告含む)