glitch-image - 画像にグリッチ加工を行う
グリッチは画像などのバイナリデータをわざと壊すことで、映像に乱れを起こす加工技術です。乱れによってちょっとした不安感を感じさせたり、空気の乱れやSF的な効果を呼び起こせます。 そんなグリッチを任意の画像に適用できるライブラリがglitch-imageです。
glitch-imageの使い方
適用した画像です。
使い方はとても簡単です。恐らくCORSの関係で、ローカルにあるファイルしか使えないでしょう。
<script src="https://unpkg.com/@uit/glitch-image/dist/glitch-image.js"
type="module"
></script>
<div style="width: 250px; height: 250px;">
<glitch -image src="/path/to/image"></glitch>
</div>
glitch-imageでは実際に画像のバイナリデータをランダムに見出すことでグリッチ加工を起こしています。単に壊せばいいという訳ではなく、いい感じのグリッチにするのがポイントです。なお、ブランドロゴなどではこういった加工を嫌がるケースも多いので、適用範囲にはご注意ください。
glitch-imageはTypeScript製のオープンソース・ソフトウェア（MIT License）です。