■はじめに
今回は Fx0 で vintageJS を実際に動かしてみたいと思います。
vignette のエフェクトを掛けてみたいと思います。
vintageJS でこの効果を掛けるには 0 〜 1.0 までの範囲の値を与えることで値の強弱を変えることが出来ます。
■vignette のエフェクトを掛けてみる
vintageJS のサンプルによると非常に単純なコードで使用することができています。
<script src="//code.jquery.com/jquery-2.0.0.min.js"></script>
<script src="jquery.vintage.js"></script>
<script>
var options = {
onError: function() {
alert('ERROR');
}
};
var effect = {
vignette: 0.6,
sepia: true
};
$('img#yourImage').vintage(options, effect);
</script>
エフェクトで引数を与えてあげるだけなんて簡単で良いですね。
実際に試してみたいと思います。
■試してみた
エフェクトを掛ける画像は vintageJS のテストディレクトリに入っている以下のパグ犬です。
ファイル名からすると sammy という名前みたいですｗ
まずは、PC 版の Firefox ブラウザでの表示です。
きちんとエフェクトがかかっていますね
次に Fx0 での表示です。
一見するとエフェクトが掛かっているように見えます。
ですが、4スミが微妙に異なる気がします。。。
グラデーションが掛かっていないみたいです。
コードは全く同じなのですが、PC の Firefox ブラウザと Firefox OS 上では表示が異なるのでしょうか。。
同じく Firefox OS 端末である Flame でも確認してみましたが結果は Fx0 と同じ状態になりました。
どうやら、Firefox OS 端末では一部の表示に問題があるみたいです。
■調べてみた
4スミのグラデーションがかからない状態となっている為、具体的に何が原因なのか調べてみました。
vignetteJS のコードを見てみたところ、 vignette のエフェクトは円形グラデーションを指定する Canvas API の createRadialGradient(), addColoerStop() で実現している模様です。
この API を単独で使用してグラデーションの結果のみ確認をしてみました。
まず、PC 版の Firefox ブラウザです。
ただしくグラデーションされています。
次に、シミュレータでの結果です。
これも正しくグラデーションされています。
最後に Fx0 での結果です。
残念な事に Fx0 では表示がおかしくなりました。
Frame でも見てみたのですが、同じ結果に・・・
シミュレータでは正しく動作しているため、もしかするとハードウェアに依存しているなどが原因としてあるのかもしれません。