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

1. HTML5のCanvas入門
- Img画像を編集してみよう 2013/12/18(水) HTML5+α @福岡 - 第21回 LT資料
Photo by Web制作向け無料写真素材／ぱくたそ http://www.pakutaso.com

2. 自己紹介です
========
江原と申します。(@itokami1123)
福岡で業務アプリをJavaScriptで作って暮らしてます。
来年からはJava屋に転職。今は、名刺無いです…。
こんな野望が持ってます。
・業務系WebアプリのUIをモット使いやすくしたい！
・JavaとJavaScriptを仲良くさせたい！
・コミュニティの力で福岡を一つに！景気上昇↑雇用拡大↑
・生涯、福岡でエンジニアしたい！

3. 本日の内容
========
HTML5のCanvas機能を使うとImgタグの画像編集が
サーバの力を借りなくても
クライアント(JavaScript)側で行うことが出来ます。
簡単ですがその手順や注意事項について説明させてください！

4. (
HTML5のCanvasて何？

5. HTML5のCanvasとは
ブラウザ上に図を描くための機能です。
JavaScriptで図形や画像の描画が出来ます！

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();

9. (
ふーん、こんなんで画像編集できんの？

10. ではCanvasで画像編集してみましょ〜！

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)

21. だったら下の手順で行けそうですね！
①x,y座標を-100px ずらす
②９０度回転！
③x,y座標を +100pxずらす
（表示されるとこに移動する）

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);
＼出来た／
(

24. (
せっかく加工した画像保存したいなぁ

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. まとめ

28. まとめ
========
・Canvasは自由に図形を描画する事が出来ます。
・CanvasはImgタグ画像を取り込む事が出来ます。
・Canvasに取り込めば画像を回転したり切り取ったり出来ます。
・画像変換の指定は逆の順番で書きましょう。
・加工した画像 canvas.toDataURL() で取り出せます。

29. HTML5のCanvasが使えるブラウザは結構多いと思います！
うまく使えばサーバの負荷を減らす事が出来そうですね！
http://fmbip.com/litmus/

30. これで発表はおしまいです！
ご清聴ありがとうございました！