むしゃくしゃしてやった、特に意味はない。今は反省している。

ということでJPEGを破壊してストレスが発散できるかもしれない、JPEGクラッシャーというものを作ってみました。
JPEG Crasher
playを押すとJPEGファイルの任意の1bitを壊しては表示、壊しては表示、を繰り返します。

すぐにこんな画像が作れます。

はい、全く嬉しくないですね。

やってることはjpegをarray bufferに入れて適当に壊して、window.URL.createObjectURLにてurlにしてimg要素に入れてるだけです。
参考にした記事は以下です。

Sending and Receiving Binary Data - DOM | MDN
XHRでバイナリを取得する方法。

JavaScript でのローカル ファイルの読み込み - HTML5 Rocks
ローカルファイルのバイナリを取得する方法。

Web アプリケーションからファイルを扱う | MDN
createObjectURLの使い方。


本当はこういうのはMPEGでやると楽しいんです。絵が壊れても動きベクトルは生きててエフェクトとして面白いんですよ。けど、今のブラウザだとちょっと厳しいかな。Media Source Extensionsが実装されると、今回の手法に近い形でできるのかも。webkit/blinkではある程度実装されてるようですが。

https://dvcs.w3.org/hg/html-media/raw-file/tip/media-source/media-source.html
http://trac.webkit.org/browser/trunk/Source/WebCore/Modules/mediasource


こういった敢えてデータを壊すのをDatamoshingといって、2009年頃に流行りました。

http://www.youtube.com/watch?v=mvqakws0CeU

Datamoshing - 映像の乱れの技法 - Radium Software がとても参考になります。