使用HTML5+Canvas调用IPHONE摄像头拍照并压缩处理

用到的HTML5标签

<input type="file" capture="camera" accept="image/*" id="cameraInput" name="cameraInput"  class="sign_file"/>

注意：capture="camera"属性只有在iphone里面的浏览器才能识别出摄像头，安卓系列手机有些内置的浏览器可以，不过大多都不行。

等比缩放图片

function drawOnCanvas(file) {
  var reader = new FileReader();

  reader.onload = function (e) {
    var dataURL = e.target.result,
        canvas = document.querySelector('canvas'),
        ctx = canvas.getContext('2d'),
        img = new Image();
         img.onload = function() {
             var square = 320;
            canvas.width = square;
            canvas.height = square;
            var context = canvas.getContext('2d');
            context.clearRect(0, 0, square, square);
            var imageWidth;
            var imageHeight;
            var offsetX = 0;
            var offsetY = 0;
            if (this.width > this.height) {
                imageWidth = Math.round(square * this.width / this.height);
                imageHeight = square;
                offsetX = - Math.round((imageWidth - square) / 2);
            } else {
                imageHeight = Math.round(square * this.height / this.width);
                imageWidth = square;
                offsetY = - Math.round((imageHeight - square) / 2);
            }
             context.drawImage(this, offsetX, offsetY, imageWidth, imageHeight);
             var base64 = canvas.toDataURL('image/jpeg',0.5);
             $('#j_thumb').val(base64.substr(22));
        };
        img.src = dataURL;
    };

  reader.readAsDataURL(file);
}

FileReader对象是用来解析file控件获取的本地图片地址的，具体介绍请百度一下。把解析好的地址设置给IMG标签的SRC属性，然后通过canvas对象把图片绘制； 在这过程中就有个等比缩放的算法，再用drawImage方法把图像画到canvas中。

如何获取画好的图片数据传到后端处理

通过 canvas.toDataURL('image/jpeg',0.5)就可以获取到base64编码值，然后你就可以按照传统的POST或者AJAX方式处理了。

让图片显示

document.querySelector('input[type=file]').onchange = function () {
  var file = input.files[0];
  drawOnCanvas(file);
};

后台处理方式

$base64 = $_POST['formFile'];
$IMG = base64_decode( $base64 );
file_put_contents('1.png', $IMG );

与传统的上传图片不同，这时候后台需要用base64_decode解码