そんな魔法みたいなことが、jQuery filter.meというjQueryプラグインで実現できます。
簡単さでは前回の読み込むだけで画像にInstagramのような加工ができるCSSライブラリ「CSSgram」にはかなわないのですが、こちらのいいところはPDF出力しても画像が綺麗な状態が保持されることです。
CSSのfilterを利用するとなぜか画像が劣化してしまうので、PDF出力でも画像が綺麗な状態を保ちたいという方はこちらの利用をおすすめします。
こちらは、デフォルトで用意されている設定を利用する方法と、自分で用意したトーンカーブ設定を読み込んで利用する方法の2種類の利用方法が用意されています。
デフォルトで利用する方法
ダウンロード
以下のgithubからjquery.filterme.jsファイルをダウンロードします。
https://github.com/MatthewRuddy/jQuery-filter.me
フォルダに入っていない直下のjquery.filterme.jsファイルを利用します。
javaScript を記述する
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js?ver=3.1.1" type="text/javascript"></script>
<script src="/jquery.filterme.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($) {
$('.filter').filterme();
});
</script>
HTML
トーンカーブ設定を適用したい画像にclassとdata-filterを記述します。
デフォルトで用意されている設定は、1977, Brannan, Gotham, Hefe, Lord Kelvin, Nashville, X-PRO IIです。
<img src="photo.jpg" class="filter" data-filter="X-PRO II" />
自分で用意したトーンカーブ設定を読み込んで利用する方法
ダウンロード
以下のgithubからjquery.filterme.jsファイルをダウンロードします。
https://github.com/MatthewRuddy/jQuery-filter.me
development/jsフォルダに入っている以下の3つのファイルと、acvフォルダを利用します。
- jDataview.js
- jspline.js
- jquery.filterme.js.
javaScript を記述する
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js?ver=3.1.1" type="text/javascript"></script>
<script src="jdataview.js"></script>
<script src="jspline.js"></script>
<script src="jquery.filterme.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($) {
$('.filter').filterme();
});
</script>
jquery.filterme.js を変更する
公式のドキュメントにはオプション記述で設定できるとかいてあるのですが、私の環境ではオプション記述では動きませんでした。
なので無理矢理ではありますが以下のように元ファイルを変更することで動かすことができました。
1. 426行目あたりの以下を検索。
'X-PRO II': { desaturate: false, curves: 'X-PRO II', vignette: false },
↓ 直下にオリジナルのトーンカーブ設定ファイルの名前を追加して修正。
'X-PRO II': { desaturate: false, curves: 'X-PRO II', vignette: false },
//オリジナルのファイルを追加（sparks.acvという名前の場合）
'sparks': { desaturate: false, curves: 'sparks', vignette: false },
2. 432行目あたりの以下を検索
/*
* Default plugin options
*/
$.filterMe.defaults = {
desaturate: false,
curves: false, // 1977, Brannan, Gotham, Hefe, Lord Kelvin, Nashville, X-PRO II (these are the names of the .acv curves files, which are essentially the filters themselves).
vignette: false,
folder: 'acv/',
debug: false
}
↓ acvフォルダの場所を適宜変更して修正
/*
* Default plugin options
*/
$.filterMe.defaults = {
desaturate: false,
curves: false, // 1977, Brannan, Gotham, Hefe, Lord Kelvin, Nashville, X-PRO II (these are the names of the .acv curves files, which are essentially the filters themselves).
vignette: false,
folder: '/common/js/acv/',
debug: false
}
HTML
トーンカーブ設定を適用したい画像にclassとdata-filterを記述します。
今回追加したトーンカーブの名前はsparksなので以下のようにします。
<img src="photo.jpg" class="filter" data-filter="sparks" />
