HTML5のCanvas入門 - Img画像を編集してみよう -

9,204 views
8,701 views

Published on

HTML5+α @福岡 - 第21回
2013/12/18(水) 19:30 LT資料

0 Comments
14 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
9,204
On SlideShare
0
From Embeds
0
Number of Embeds
174
Actions
Shares
0
Downloads
20
Comments
0
Likes
14
Embeds 0
No embeds

No notes for slide

HTML5のCanvas入門 - Img画像を編集してみよう -

  1. 1. HTML5のCanvas入門 - Img画像を編集してみよう 2013/12/18(水) HTML5+α @福岡 - 第21回 LT資料 Photo by Web制作向け無料写真素材/ぱくたそ http://www.pakutaso.com
  2. 2.   自己紹介です ======== 江原と申します。(@itokami1123) 福岡で業務アプリをJavaScriptで作って暮らしてます。 来年からはJava屋に転職。今は、名刺無いです…。 こんな野望が持ってます。 ・業務系WebアプリのUIをモット使いやすくしたい! ・JavaとJavaScriptを仲良くさせたい! ・コミュニティの力で福岡を一つに!景気上昇↑雇用拡大↑ ・生涯、福岡でエンジニアしたい!
  3. 3. 本日の内容 ======== HTML5のCanvas機能を使うとImgタグの画像編集が サーバの力を借りなくても クライアント(JavaScript)側で行うことが出来ます。 簡単ですがその手順や注意事項について説明させてください!
  4. 4. ( HTML5のCanvasて何?
  5. 5. HTML5のCanvasとは ブラウザ上に図を描くための機能です。 JavaScriptで図形や画像の描画が出来ます!
  6. 6. 例えば、ブラウザに線とか引けます。 ! <canvas id="sample" width="200" height="150"></canvas> ! var canvas = document.getElementById('sample'); ! var ctx = canvas.getContext('2d'); ! 描画対照を選択! ctx.beginPath(); ! ctx.moveTo(10, 10); ctx.lineTo(40, 40); ! ctx.stroke();
  7. 7. 例えば、ブラウザに線とか引けます。 ! <canvas id="sample" width="200" height="150"></canvas> ! var canvas = document.getElementById('sample'); ! var ctx = canvas.getContext('2d'); ! ctx.beginPath(); 描画道具 ! Canvas 描画対照から Context ctx.moveTo(10, 10); 描画する道具を ctx.lineTo(40, 40); ! いただきます。 ctx.stroke();
  8. 8. 例えば、ブラウザに線とか引けます。 ! <canvas id="sample" width="200" height="150"></canvas> 座標位置を設定して描画できます。 ! ! 線が引けた! var canvas = document.getElementById('sample'); ! var ctx = canvas.getContext('2d'); ! ctx.beginPath(); ! ctx.moveTo(10, 10); ctx.lineTo(40, 40); ! ctx.stroke();
  9. 9. ( ふーん、こんなんで画像編集できんの?
  10. 10. ではCanvasで画像編集してみましょ〜!
  11. 11. imgとCanvasの下準備…。 (512px) (512px) のpngを用意しました。 九九衰弱 -iPhoneアプリ https://itunes.apple.com/jp/app/99suizyaku/id571962674 九九の書かれたカードでする神経衰弱ゲーム。間に合わないと爆破しちゃうぞ。 HTMLとCSSはこんな感じで用意しました。 <img id="source_img" /> <canvas id="edit_canvas" width="200" height="200" > </canvas> img{ Canvas解像度(200px) ×(200px) width: 200px; height: 200px; box-shadow: 0 2px 4px rgba( 0, 0, 0, 0.5); } canvas{ 画面に表示するサイズ width: 200px; height: 200px; box-shadow: 0 2px 4px rgba( 0, 0, 0, 0.5); }
  12. 12. imgデータをロードして… var $img = $('#source_img'); ! $img.load( drawCanvas ); ! $img.attr( "src", "http://jsrun.it/assets/3/F/d/Q/3FdQP.png" ); ! imgタグに 画像を設定! imgがload完了後 drawCanvas関数を呼びます。
  13. 13. imgデータをロードしてからのCanvas描画! function drawCanvas( event){ Eventからimgタグを取得! var $img = $( event.target), img = $img[0]; Canvas描画道具取得 var $canvas = $( "#edit_canvas"); var ctx = $canvas[0].getContext("2d"); ctx.drawImage( img, 0, 0 ); } imgデータを使ってCanvaに描画!
  14. 14. そのまま貼付けしてみると… function drawCanvas( event){ var $img = $( event.target), imgデータを (0,0)の位置に貼付け img = $img[0]; Canvasは 200x200なのではみでます! var $canvas = $( "#edit_canvas"); var ctx = $canvas[0].getContext("2d"); ctx.drawImage( img, 0, 0 ); } Σ (
  15. 15. 貼付け先の幅と高さを指定してあげると… function drawCanvas( event){ var $img = $( event.target), imgデータを (0,0)の位置に img = $img[0]; 幅200px 高さ200pxで描画! var $canvas = $( "#edit_canvas"); var ctx = $canvas[0].getContext("2d"); ctx.drawImage( img, 0, 0 , 200, 200); } (
  16. 16. 爆弾だけ切り取りたい場合は… function drawCanvas( event){ var $img = $( event.target), imgの(12,332)から幅高さ100pxを img = $img[0]; 幅200px 縦200pxで描画! var $canvas = $( "#edit_canvas"); var ctx = $canvas[0].getContext("2d"); ctx.drawImage(img, 12,332,100,100, 0,0,200,200); } (
  17. 17. ( あっ画像の向き間違えた…
  18. 18. 大丈夫!画像を回転出来ます!
  19. 19. 30度、60度、90度で回転させてみましょう〜! ctx.rotate( 30 * Math.PI / 180); ctx.drawImage( img, 0, 0 , 200, 200); ctx.rotate( 60 * Math.PI / 180); ctx.drawImage( img, 0, 0 , 200, 200); ctx.rotate( 90 * Math.PI / 180); ctx.drawImage( img, 0, 0 , 200, 200); ( あれっ?消えたよ..
  20. 20. 左上(0,0)を中心に回るみたいですね! ctx.rotate( 30 * Math.PI / 180); ctx.drawImage( img, 0, 0 , 200, 200); (0,0)
  21. 21. だったら下の手順で行けそうですね! ①x,y座標を-100px ずらす ②90度回転!  ③x,y座標を +100pxずらす (表示されるとこに移動する)
  22. 22. さっきのイメージをコードにして… ①x,y左上に移動して.. ctx.translate( -100, -100 ); ctx.rotate( 90 * Math.PI / 180); ctx.translate( 100, 100 ); ②90度回転! ③表示できる位置に戻す ctx.drawImage( img, 0, 0 , 200, 200); !?表示されない ( あれっ!?
  23. 23. 実は変換は逆に設定する必要があるのです。 ctx.translate( ctx.rotate( 100, 100 ); ③表示できる位置に戻す 90 * Math.PI / 180); ②90度回転! ctx.translate( -100, -100 ); ①x,y左上に移動して.. ctx.drawImage( img, 0, 0 , 200, 200); \出来た/ (
  24. 24. ( せっかく加工した画像保存したいなぁ
  25. 25. 大丈夫!画像を取り出せます!
  26. 26. Canvasの描画内容をBase64形式で取得出来ます。 var $canvas = $( "#edit_canvas"); var ctx = $canvas[0].getContext("2d"); ctx.translate( ctx.rotate( 100, 100 ); 90 * Math.PI / 180); Base64形式で取得! ctx.translate( -100, -100 ); ctx.drawImage( img, 0, 0 , 200, 200); var base64Data = $canvas[0].toDataURL("image/png"); $('#out_img').attr( "src", base64Data); canvasタグ imgタグ この例は、作成したBase64形式のデー タをimgタグのsrcに指定しています。 文字列なのでサーバに送信してサーバ 側でPNG画像にする事も可能です。
  27. 27. まとめ
  28. 28. まとめ ======== ・Canvasは自由に図形を描画する事が出来ます。 ・CanvasはImgタグ画像を取り込む事が出来ます。 ・Canvasに取り込めば画像を回転したり切り取ったり出来ます。 ・画像変換の指定は逆の順番で書きましょう。 ・加工した画像 canvas.toDataURL() で取り出せます。
  29. 29. HTML5のCanvasが使えるブラウザは結構多いと思います! うまく使えばサーバの負荷を減らす事が出来そうですね! http://fmbip.com/litmus/
  30. 30. これで発表はおしまいです! ご清聴ありがとうございました!

×