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

一つ一つの素材は単純でも、素材同士を合成することで新しい素材を生み出すことができます。最近ではAIによって、風景写真を別な風合いに変えたりするものもあります。従来、人手でやっていたような作業がすべて自動でできるようになっています。

今回紹介するblend.jsはAIほど高度な訳ではありませんが、二つの画像をWeb上でミックスしてくれる面白いライブラリです。

blend.jsの使い方

一番左がオリジナルです。そこに白黒の効果を複数回重ねています。

左右どちらかだとといった具合に範囲指定もできます。

さらに細かく、9つに分割して効果を適用しています。

分割して回転といったこともできます。

さらに細かいパターンでブレンドしています。

blend.jsはCanvasを使って画像の重ね合わせを行っています。適度に透明度を設定してブレンドしているので面白い効果が生み出されています。一部だけ光らせるような効果や、集中線を引くような効果的な加工もできることでしょう。

blend.jsはHTML5/JavaScript製のオープンソース・ソフトウェア(MIT License)です。

blend.js

qur2/blend.js: Javascript image manipulation library

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2