okayama-js 第四回勉強会（http://okayama-js.net/?p=7）で紹介したものです。ややキワモノネタですが。 【2012.10.16】結構恥ずかしい誤植があったので修正しました。canvs→canvas

1. JavaScriptで
『漫画カメラ』的画像加工
okayama-js
前川 昌幸

2. 漫画カメラ
• http://itunes.apple.com/jp/app/man-
huakamera/id557883632
• iPhone向けカメラアプリ
• 海外でもヒット

3. こんな感じで撮れます

4. JavaScriptでやってみる！
とりあえずデモ！

5. 仕組み
• HTML5のcanvasを利用
• canvasを使うと1ドット単位で色の情報を
取得/編集できる
• 力技とか言うな

6. コード解説
canvasへの画像の取り込み(jQuery)
var img = $(‘#image’);
var cvs = $(‘#canvas’);
var ctx = cvs. getContext('2d');
ctx.drawImage(img, 0, 0, img.width, img,height);

7. コード解説
色情報の取得
var imgData = ctx. getImageData(0, 0, 360, 480);
var dotList = imgData.data;
• imgData.dataの中は全てのピクセルのデー
ターの配列
• 1つのピクセルに4つの数値(r,g,b,a)

8. コード解説
色情報の編集(例：グレースケール)
for (var i = 0; i < img.data.length; i += 4) {
var r = img.data[i];
var g = img.data[i + 1];
var b = img.data[i + 2];
var gray = (r + g + b) / 3 ;
img.data[i] = gray;
img.data[i + 1] = gray;
img.data[i + 2] = gray;
}
ctx.putImageData(img, 0, 0);

9. 画像加工の順番
• 画像を階調に変換（入力値参照）
• 境界線の検出（参考： http://shokai.org/blog/archives/5668 ）
• さらに3階調に変換（入力値参照）
• 白・トーン・黒に変換（グレーにすると
雰囲気出ない）
• 境界線を上にのせる

10. トーンの入れかた
• rgbaのaを0にすると透明になる
• ctx.drawImageは複数回実行することで画
像を重ねられるので、白・透明・黒を
トーンの上に重ねる
• 最後に境界線以外を透明にした画像を重
ねる

11. まとめ
やってみてわかったこと
『漫画カメラ』ってよくできてる！

12. ありがとうございました