はしくれエンジニアもどきのメモ

情報・Web系技術・Englishの勉強メモ・備忘録です。

FileAPI でカメラを起動し、Canvas上に画像を描画させる

FileAPI でカメラを起動し、Canvas 上に画像を描画させる

File API でカメラを起動し(今のところPC では画像選択のみ)、その画像をCanvas 上に描画させます。

なお、iPhone Safari では、カメラで撮影したような 2[MB]以上の画像は、そのままではCanvas に描画できないようなので、リサイズをしています。

サンプル

カメラ付きのモバイル端末では、カメラが起動するはずです。

今回は、モバイル端末では、上限幅を超えていればリサイズ、超えてなければそのまま描画。モバイル端末以外では、そのまま描画としてます。

ファイル選択(カメラ起動)テスト

iPhone4s Safariでは、「ファイルを選択」をタップすると以下のように表示されます。

iPhoneのスクショ

コード

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

広告を非表示にする