HTML5調用手機相機拍照

前端調用手機相機拍照

實現方式常見有兩種：

一種是通過video控件，通過捕獲video的流，截取video中的圖像實現拍照，

還有一種是通過input[file]控件調用移動端的攝像頭，實現拍照。

兩種方法各有利弊，第一種可以實現對拍照界面的重寫（比如添加拍照界面的遮罩層提示框等）

但是，第一種方式在IPhone環境下不兼容，不能使用。

第二種方式實際上是調用input[type='file']，會彈出一個選擇框讓用戶選擇是調用相機還是調用相冊，

好處就是兼容優於上一種，不好的地方就是這種方法無法控制拍照，想要在移動端實現只能拍照不能選擇照片或者在拍照界面添加引導遮罩層的方法是行不通了。

這里說一下第二種方式的實現方式：

首先在頁面上添加一個input控件實現調用相機。

<input id="takepicture" type="file" accept="image/*" capture="camera" style="display: none">

自定義方式調用相機：

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, '拍照失敗,請聯系客服或嘗試更換手機再試!');
                }
            }
        }
    }
27 }();

這個onchange方法中，通過兩種方式捕獲用戶拍照完之后的照片，第一種是捕獲照片的文件流（存在一定兼容性問題），如果第一種方式不兼容則使用第二種方式獲取照片的base64編碼（這種方式兼容性較高），保險一點，兩種方式都是用。

以上，就完成了前端的調用相機並拍照的功能。

 

---

 

前端照片壓縮處理

前端的照片壓縮沒有什么好的解決方案。目前有的是通過canvas的兩個API實現照片的壓縮處理。 

解決兼容性需要用到兩個插件：

點擊這里

實現代碼：

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