SimpleImage.jsを使って、選択した任意の画像を擬似的な虹色やグレイスケールに変換します。元画像はcanvasに読み込まれ、7つのパートに分割、それぞれ違う色のフィルタで単色の明暗に加工されます。仕上がりは、Photoshopのレイヤー効果のスクリーンのような感じになります。グレイスケールは、元画像の彩度を0にした状態になります。

使い方:ファイルを選択するボタンをクリックして、デスクトップなどに置いた画像を選択します。ブラウザ画面に画像が表示されたら、「グレイスケールに変換」または「虹色に変換」のボタンをクリックすると加工した画像が元の画像の上に表示されます(元の画像は残ります)。「画像をリセット」をクリックすると元の画像が表示されます。ただし、すでに虹色に変換している場合は、グレイスケールに変換すると、7色に加工した画像の彩度を0にしたようになります。元の画像をそのままグレイスケールにする場合はリロードする必要があります。

でき上がった画像は、画像の上で右クリックするなどして保存ダイアログを出し、保存できます。

画像(canvas)表示エリア

 

 

引用と参考;http://codepen.io/YenKang/pen/rzexaW
SimpleImage.js配布元:https://www.dukelearntoprogram.com/
戻るボタン