だるやなぎメーカーの作り方

だるやなぎメーカー - あなただけの、だるやなぎを簡単に

正月からこんな無駄アプリを作っていました。今年一年を無駄にしそうな勢いですね。

しかし、この無駄アプリは無駄に HTML5 の Canvas, Web Workers, Blob を使って実装しています。あまりにも技術の無駄使いですね。Web Workers でメインの処理となる色変換を行っています。

とりあえずノウハウは無駄にならないのでメモしておきます。

Canvas でピクセルを弄る

// 指定した領域のピクセルデータを取得
var imageData = canvas.getImageData(0, 0, width, height);

// バッファ用のデータを作成
var bufferImageData = canvas.createImageData(width, height);

// Canvas にピクセルデータを反映
canvas.putImageData(bufferImageData, 0, 0);

Canvas の画像を Blob 化

// msToBlob を使えるようにする
canvas.toBlob = canvas.toBlob || canvas.msToBlob;

// Canvas の内容を Blob 化
var blob = canvas.toBlob();

Blob をダウンロードさせる

navigator.saveBlob = navigator.saveBlob || navigator.msSaveBlob;

navigator.saveBlob(canvas.toBlob(), "daruyanagi.png");

残念ながら toBlob や saveBlob は IE10 限定のようです。