JavaScriptで『漫画カメラ』的画像加工    okayama-js     前川 昌幸
漫画カメラ• http://itunes.apple.com/jp/app/man- huakamera/id557883632• iPhone向けカメラアプリ• 海外でもヒット
こんな感じで撮れます
JavaScriptでやってみる!    とりあえずデモ!
仕組み• HTML5のcanvasを利用• canvasを使うと1ドット単位で色の情報を 取得/編集できる• 力技とか言うな
コード解説canvasへの画像の取り込み(jQuery)var img = $(‘#image’);var cvs = $(‘#canvas’);var ctx = cvs. getContext(2d);ctx.drawImage(img, ...
コード解説色情報の取得var imgData = ctx. getImageData(0, 0, 360, 480);var dotList = imgData.data;• imgData.dataの中は全てのピクセルのデー  ターの配列• ...
コード解説色情報の編集(例:グレースケール)for (var i = 0; i < img.data.length; i += 4) {  var r = img.data[i];  var g = img.data[i + 1];  var ...
画像加工の順番• 画像を階調に変換(入力値参照)• 境界線の検出(参考: http://shokai.org/blog/archives/5668 )• さらに3階調に変換(入力値参照)• 白・トーン・黒に変換(グレーにすると  雰囲気出ない)...
トーンの入れかた• rgbaのaを0にすると透明になる• ctx.drawImageは複数回実行することで画 像を重ねられるので、白・透明・黒を トーンの上に重ねる• 最後に境界線以外を透明にした画像を重 ねる
まとめ   やってみてわかったこと『漫画カメラ』ってよくできてる!
ありがとうございました
Upcoming SlideShare
Loading in …5
×

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

3,677 views

Published on

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

Published in: Technology
0 Comments
10 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,677
On SlideShare
0
From Embeds
0
Number of Embeds
14
Actions
Shares
0
Downloads
9
Comments
0
Likes
10
Embeds 0
No embeds

No notes for slide

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

  1. 1. JavaScriptで『漫画カメラ』的画像加工 okayama-js 前川 昌幸
  2. 2. 漫画カメラ• http://itunes.apple.com/jp/app/man- huakamera/id557883632• iPhone向けカメラアプリ• 海外でもヒット
  3. 3. こんな感じで撮れます
  4. 4. JavaScriptでやってみる! とりあえずデモ!
  5. 5. 仕組み• HTML5のcanvasを利用• canvasを使うと1ドット単位で色の情報を 取得/編集できる• 力技とか言うな
  6. 6. コード解説canvasへの画像の取り込み(jQuery)var img = $(‘#image’);var cvs = $(‘#canvas’);var ctx = cvs. getContext(2d);ctx.drawImage(img, 0, 0, img.width, img,height);
  7. 7. コード解説色情報の取得var imgData = ctx. getImageData(0, 0, 360, 480);var dotList = imgData.data;• imgData.dataの中は全てのピクセルのデー ターの配列• 1つのピクセルに4つの数値(r,g,b,a)
  8. 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. 9. 画像加工の順番• 画像を階調に変換(入力値参照)• 境界線の検出(参考: http://shokai.org/blog/archives/5668 )• さらに3階調に変換(入力値参照)• 白・トーン・黒に変換(グレーにすると 雰囲気出ない)• 境界線を上にのせる
  10. 10. トーンの入れかた• rgbaのaを0にすると透明になる• ctx.drawImageは複数回実行することで画 像を重ねられるので、白・透明・黒を トーンの上に重ねる• 最後に境界線以外を透明にした画像を重 ねる
  11. 11. まとめ やってみてわかったこと『漫画カメラ』ってよくできてる!
  12. 12. ありがとうございました

×