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