Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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,904 views

Published on

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

Published in: Technology
  • Be the first to comment

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

×