HTML5のCanvas入門 - Img画像を編集してみよう -
•
15 likes•16,258 views
HTML5+α @福岡 - 第21回 2013/12/18(水) 19:30 LT資料
Report
Share
HTML5のCanvas入門 - Img画像を編集してみよう -
- 1. HTML5のCanvas入門 - Img画像を編集してみよう 2013/12/18(水) HTML5+α @福岡 - 第21回 LT資料 Photo by Web制作向け無料写真素材／ぱくたそ http://www.pakutaso.com
- 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. 例えば、ブラウザに線とか引けます。 ! <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. 例えば、ブラウザに線とか引けます。 ! <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();
- 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. 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. 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. そのまま貼付けしてみると… 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. 貼付け先の幅と高さを指定してあげると… 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. 爆弾だけ切り取りたい場合は… 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. ( あっ画像の向き間違えた…
- 18. 大丈夫！画像を回転出来ます！
- 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. 左上(0,0)を中心に回るみたいですね！ ctx.rotate( 30 * Math.PI / 180); ctx.drawImage( img, 0, 0 , 200, 200); (0,0)
- 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. 実は変換は逆に設定する必要があるのです。 ctx.translate( ctx.rotate( 100, 100 ); ③表示できる位置に戻す 90 * Math.PI / 180); ②90度回転！ ctx.translate( -100, -100 ); ①x,y左上に移動して.. ctx.drawImage( img, 0, 0 , 200, 200); ＼出来た／ (
- 25. 大丈夫！画像を取り出せます！
- 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. まとめ