ITエンジニア/デザイナ向けにオープンソースを毎日紹介

写真は撮影したそのままでなく、加工すると印象が変わるものです。セピアやグレースケールなどはよく使われるところで、コントラストや明るさを変更しても様変わりするでしょう。

そういった加工をローカルで行ってもいいですが、オリジナルを常に残しておかないといけません。それが面倒という方はFiltrr2.jsを使ってみましょう。

Filtrr2.jsの使い方

こちらが元の写真です。
こちらが元の写真です。

Webサイト上で表示するとこんな感じに編集されています。
Webサイト上で表示するとこんな感じに編集されています。

JavaScriptは次のように処理を行います。

Filtrr2("#my-img", function() {
    this.brighten(40)
        .saturate(50)
        .render();
});

数字で強さを指定します。画像はCanvasで描かれますので、何度でも自由に再編集ができるようになっています。クライアントサイドで行いますのでサーバ負荷もなく、保存する必要もないので手軽に利用できるでしょう。

Filtrr2.jsはJavaScript製、MIT Licenseのオープンソース・ソフトウェアです。

Filtrr2.js

alexmic/filtrr

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2