FileAPI でカメラを起動し、Canvas上に画像を描画させる
FileAPI でカメラを起動し、Canvas 上に画像を描画させる
File API でカメラを起動し（今のところPC では画像選択のみ）、その画像をCanvas 上に描画させます。
なお、iPhone Safari では、カメラで撮影したような 2[MB]以上の画像は、そのままではCanvas に描画できないようなので、リサイズをしています。
サンプル
カメラ付きのモバイル端末では、カメラが起動するはずです。
今回は、モバイル端末では、上限幅を超えていればリサイズ、超えてなければそのまま描画。モバイル端末以外では、そのまま描画としてます。
iPhone4s Safariでは、「ファイルを選択」をタップすると以下のように表示されます。
コード
FileAPI で画像を選択またモバイルではカメラを起動し、画像をCanvasに表示する。なお、iP ...
コード解説
File API capture="camera"
capture="camera" を指定するだけで、ファイル選択の際にカメラを起動するか選択できます！
<input id="<File-ID>" accept="image/*" type="file">
リサイズ
iPhone ではRAM 容量の問題もあり、2[MB]以上の画像をCanvas で描画できないようです。今回はそれを回避するためリサイズしています。
参考リンク：http://d.hatena.ne.jp/shinichitomita/20120927/1348726674
リサイズ方法は、目標幅（今回は1024px）を決めておき、これを超えていればリサイズ、越えてなければそのまま描画。 リサイズする場合は、width,height どちらが長いか求め、長い方を目標幅に合わせ、もう一方を比で求めています （function resizeWidthHeight(target_length_px, w0, h0)）。 描画する場合は、getContext('2d').drawImage(img, x, y, w, h); 関数で、w, h にリサイズ後のサイズを指定すればOK です。
リサイズ部分のコードは以下です。
var resize = resizeWidthHeight(1024, w, h);
drawImgOnCav(canvas, img, 0, 0, resize.w, resize.h);
// リサイズ後のwidth, heightを求める
function resizeWidthHeight(target_length_px, w0, h0){
//リサイズの必要がなければ元のwidth, heightを返す
var length = Math.max(w0, h0);
if(length <= target_length_px){
return{
flag: false,
w: w0,
h: h0
};
}
//リサイズの計算
var w1;
var h1;
if(w0 >= h0){
w1 = target_length_px;
h1 = h0 * target_length_px / w0;
}else{
w1 = w0 * target_length_px / h0;
h1 = target_length_px;
}
return {
flag: true,
w: parseInt(w1),
h: parseInt(h1)
};
}
//キャンバスにImageを表示
function drawImgOnCav(canvas, img, x, y, w, h) {
var ctx = canvas.getContext('2d');
canvas.width = w;
canvas.height = h;
ctx.drawImage(img, x, y, w, h);
}
参考リンク