FC2ブログ

 RSSリーダーで購読する   »FC2共有テンプレート関連の記事はこちら

Topic Path

トップ > スポンサー広告web制作に役立つ知識 > 画像に強力なレタッチエフェクトをかけられる「imagefx.js」

スポンサーサイトこのエントリをはてなブックマークに登録

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

この記事を見ている人は、次の記事も見ています。

ロードしています....

最新エントリー

画像に強力なレタッチエフェクトをかけられる「imagefx.js」このエントリをはてなブックマークに登録

Nihilogic : Javascript Image Effects

Nihilogic : Javascript Image Effects
これはすごい。
canvasでエレガントにエフェクトを施すスクリプトは結構あるんだけどここまでまとまった機能を提供しているのはなかったなぁ。
機能の一覧は以下の通り。
  • fliphorizontal
  • flipvertical
  • invert
  • desaturate
  • blur
  • blurfast
  • blurmore
  • sharpen
  • sharpenmore
  • edges
  • emboss
  • laplace
  • noise
  • lighten
  • brightness
  • sepia
  • histogram
記法は

	<img src="image.jpg" id="myimage" />

	<script type="text/javascript" >
		jsImageFX.doImage(document.getElementById("myimage"), "blur");
	</script>

もしくは

	<img src="image.jpg" imagefx="blur" />

で動作します。
jQueryが使える環境ならこんな感じでどうでしょう。
<script type="text/javascript">
$(function() {

		$("img.imagefx").attr({
			imagefx: function() {
			
			return $(this).attr("rel");
			
			}
		});
});
</script>

こうしておくと、class="imagefx" rel="エフェクト名"で動作するのでなかなかスマートだと思います。
実際に使う際はエフェクトを使う分だけ必要なjsファイルをインクルードしてください。
<script type="text/javascript" src="imagefx.js"></script>
<script type="text/javascript" src="imagefx_none.js"></script>
<script type="text/javascript" src="imagefx_invert.js"></script>
<script type="text/javascript" src="imagefx_desaturate.js"></script>
<script type="text/javascript" src="imagefx_blur.js"></script>
<script type="text/javascript" src="imagefx_blurfast.js"></script>

<script type="text/javascript" src="imagefx_blurmore.js"></script>
<script type="text/javascript" src="imagefx_blurmotion.js"></script>
<script type="text/javascript" src="imagefx_sharpen.js"></script>
<script type="text/javascript" src="imagefx_sharpenmore.js"></script>
<script type="text/javascript" src="imagefx_emboss.js"></script>
<script type="text/javascript" src="imagefx_fliphorizontal.js"></script>
<script type="text/javascript" src="imagefx_flipvertical.js"></script>
<script type="text/javascript" src="imagefx_noise.js"></script>
<script type="text/javascript" src="imagefx_lighten.js"></script>

<script type="text/javascript" src="imagefx_laplace.js"></script>
<script type="text/javascript" src="imagefx_edges.js"></script>
<script type="text/javascript" src="imagefx_brightness.js"></script>
<script type="text/javascript" src="imagefx_sepia.js"></script>
<script type="text/javascript" src="imagefx_histogram.js"></script>

imagefx.jsがコア部分で、エフェクト毎にjsファイルを読み込んでいくことになります。
また、このエフェクト用のjsファイルなんですが、ダウンロード先がなかったのでurl書いておきますー。
zipとかなら楽なんですがね~。
というわけで面白そうなので実際に試してみます。

default


blur


desaturate


emboss


fliphorizontal


flipvertical


noise


laplace


ブラウザや、環境によっては正しく反映されてないかもしれません。

この記事を見ている人は、次の記事も見ています。

ロードしています....

最新エントリー

Trackbackについて

Trackback policy - トラックバック・ポリシー

言及リンクは特に必要ありません(が承認待ちになることがあります)。初めてされる方もお気軽にどうぞー。内容が良かった場合はこちらからもトラックバックを送らせていただくことがあります。また、内容が悪質な宣伝目的やスパムと思われるものや全く関係のないトラックバックは削除します。

以上に了承された方は下記のTBアドレスを御使用ください。


この記事にトラックバックする(FC2ブログユーザー)

comment

comments:
- Responses to " スポンサーサイト "0 Responses to " 画像に強力なレタッチエフェクトをかけられる「imagefx.js」 "
Secret

about me.

ajin

Author:ajin
フレームだけで4万円位する伊達メガネをかけています。
無駄なことが大好きです。

僕の本家サイトajin.jpとそのブログ、だい亜りーも宜しければご覧ください。

このブログの説明

あとテレパシー少女 蘭から電波を受信中。
翠可愛すぎて失神しそう。

最新記事

»すべての記事を見る

カテゴリ
気になるモノ
言及した記事へジャンプします。
月別アーカイブ
最新コメント
今読んでいる本
スポンサード リンク
どく×あま!
読書メーターとAmazonアソシエイトを連動させるブログパーツです。 生成はこちらから
検索フォーム
あわせて読みたい
あわせて読みたいブログパーツ
スポンサード リンク
リンク
全ページ、リンク・アンリンクフリーです。 特に許可は必要ないです。 好きなページをどうぞ。
メールフォーム
ご意見・感想又は相互リンクをご希望の方は下記のメールフォームよりお問い合わせください。

名前:
メール:
件名:
本文:

QRコード
QRコード
フィード
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。