JavaScriptで『漫画カメラ』的画像加工

JavaScriptで『漫画カメラ』的画像加工

• 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.
  ありがとうございました