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

Canvasタグを使うと画像を読み込んで加工できるというのは良く知られていると思います。縮小したり切り抜いたりすることはもちろん、バイナリデータとして読み込めるのでデータを改変することだってできます。

今回紹介するGrayもその一つで、画像をグレースケールに変換できるソフトウェアです。ただ変換するだけでない面白さもあるのでぜひ試してみてください。

Grayの使い方

サンプルです。元は同じ画像ですが、右側はグレースケールになっています。
サンプルです。元は同じ画像ですが、右側はグレースケールになっています。

上から2番目の画像はgrayscale-fadeというクラスが追加されています。これはマウスオーバーすると色が徐々に戻る仕組みになります。画像はCSSスプライトによる指定にも対応しています。手軽に画像加工が実現できますね。

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

Gray

karlhorky/gray

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2