写真を自動的に加工してくれるjQuery「vintage.js」

Instagramがちょっと前に流行り（今もかな？）、またそのようなアプリがいろいろ出ており、
写真を加工するのがちょっとデフォルトになっている気がする昨今ですが、

今回、写真をInstagramのように加工してくれるjQueryのプラグインを紹介します。

その名も「vintage.js」といいます。

ダウンロードは下記URLからどうぞ。

デモを作成してますので、そちらをぜひご覧ください。

デモでは一枚目は、自動的に加工してくれるようにしていますが、
他の写真は、クリックすると加工されるようになっています。

使い方は非常に簡単です。

「vintage.js」の使用方法
まずは、下記をhead内に記載します。

XHTML

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script type="text/javascript" src="js/vintage.js"></script> <link rel="stylesheet" type="text/css" href="css/vintagejs.css" />

1
2
3

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript"  src="js/vintage.js"></script>
<link rel="stylesheet" type="text/css" href="css/vintagejs.css" />

そしてその下辺りに、
以下を記載します。

JavaScript

<script type="text/javascript" > $(function () { $(".vintage").vintage(); }); </script>

1
2
3
4
5

<script type="text/javascript" >
$(function () {
    $(".vintage").vintage();
});
</script>

そしてHTMLはclassをつけるだけです。

XHTML

<img src="画像パス" class="vintage" />

1

<img src="画像パス" class="vintage" />

オプションで、微調整ができるようです。

JavaScript

$(function(){ $('.vintage').vintage({ vignette: { //ぼかし black: 0.3, white: 0.3 }, noise: 40, //ノイズ screen: { //レイヤー red: 12, green: 75, blue: 153, strength: 0.3 }, desaturate: 0.05 //フィルター度合い }); });

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

$(function(){
    $('.vintage').vintage({
            vignette: { //ぼかし
                black: 0.3,
                white: 0.3
            },
            noise: 40, //ノイズ
            screen: { //レイヤー
                red: 12,
                green: 75,
                blue: 153,
                strength: 0.3
            },
            desaturate: 0.05 //フィルター度合い
    });
});

なかなか風合いの良い写真になりますね！

やはり写真はサイトにとって重要な要素なので、
見栄えが良い方がいいですね！

WRITER

スターフィールド編集部