HTML 5携帯カメラを呼び出して写真を撮る

フロントエンドで携帯カメラを呼び出して写真を撮る
実装方法は2つあります.
1つは、ビデオコントロールによって、ビデオのストリームをキャプチャすることによって、ビデオ中の画像を切り取って撮影を実現することであり、
もう1つはinput[file]コントロールで移動端のカメラを呼び出し、写真を撮ることです.
2つの方法にはそれぞれメリットとデメリットがあり、1つ目は写真インタフェースの書き換え(例えば、写真インタフェースのマスクヒントボックスを追加するなど)を実現することができる.
しかし、1つ目の方法はiPhone環境では互換性がなく、使用できません.
2つ目は実際にinput[type='file']を呼び出すことで、カメラを呼び出すかアルバムを呼び出すかを選択する選択ボックスがポップアップされます.
利点は、互換性が前述より優れていることであり、悪い点は、この方法では写真を制御できないことであり、移動端で写真しか撮影できないので写真を選択できないか、写真インタフェースにガイドマスクを追加する方法は通用しないことである.
ここでは、2つ目の方法の実現方法について説明します.
まず、ページにinputコントロールを追加して、呼び出しカメラを実装します.

カメラをカスタマイズ:

var takePictureOnclick = function(){
    var takePicture = document.getElementById('takepicture');
    ... //          
    takePicture.click();
}

その後jsにこのinputに対するonchangeイベントを追加し,撮影後に写真を取得するストリームを傍受する.

  //       ,      
  var takePicture = document.getElementById('takepicture');
  var takePictureUrl = function () {
      takePicture.onchange = function (event) {
          var files = event.target.files, file;
          if (files && files.length > 0) {
              file = files[0];
              try {
                  var URL = window.URL || window.webkitURL;
                 var blob = URL.createObjectURL(file);　　//         
                 compressPicture(blob);　　//     
             }
             catch (e) {
                 try {
                     var fileReader = new FileReader();
                     fileReader.onload = function (event) {　　　　//      base64  
                         compressPicture(event.target.result);　　//     
                     };
                     fileReader.readAsDataURL(file);
                 }
                 catch (e) {
                     alert(common.MESSAGE.title.error, '    ,              !');
                 }
             }
25         }
26     }
27 }();

このonchangeメソッドでは,ユーザが写真を撮った後の写真を2つの方法でキャプチャし,1つ目は写真をキャプチャするファイルストリーム(一定の互換性の問題がある)であり,1つ目が互換性がない場合は2つ目の方法で写真を取得するbase 64符号化(この方法は互換性が高い)であり,保険点では2つの方法が用いられる.
以上で、フロントエンドのカメラを呼び出して写真を撮る機能が完成しました.
フロントエンド写真圧縮処理
フロントエンドの写真圧縮には良い解決策はありません.現在,canvasの2つのAPIにより写真の圧縮処理を実現しているものがある. 
互換性の解決には2つのプラグインが必要です.
ここをクリック
実装コード:

  var compressPicture = function (blob) {
    var quality = 0.5, image = new Image();
    image.src = blob;
    image.onload = function () {
      var that = this;
      //     
      var width = that.width, height = that.height;
      width = width / 4;
      height = height / 4;
     //   canvas  
     var canvas = document.createElement('canvas');
     var ctx = canvas.getContext('2d');
     canvas.width = width;
     canvas.height = height;
     ctx.drawImage(that, 0, 0, width, height);
     //   base64,            mobileBUGFix.js
     var imgurl = canvas.toDataURL('image/jpeg', quality);
     //   IOS    
     if (navigator.userAgent.match(/iphone/i)) {
       var mpImg = new MegaPixImage(image);
       mpImg.render(canvas, {
         maxWidth: width,
         maxHeight: height,
         quality: quality
       });
       imgurl = canvas.toDataURL('image/jpeg', quality);
     }
     //     
     uploadPicture(imgurl);
   };
 }