HTML5 App 实现拍照

由于HTML5规范还在完善中，且不同浏览器的支持也不尽相同。所以用HTML5中video实现拍照功能难免有各种问题。所以经过几番努力和网上资源的查找通过input[type=file]实现了拍照功能（不用怀疑，完全可以实现），并且经过不同手机测试暂无发现不支持的情况。

项目中用到了adminLTE框架和Jquery插件，如果大家的显示效果不同又纠结于此，请下载相应的框架和插件。

效果如下：

       

　　　　　　　　　　　　　拍照前　　　　　　　　　　　　　　　　　　　　　　　　　拍照后　

HTML5代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- Tell the browser to be responsive to screen width -->
<meta
    content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
    name="viewport">
<!-- Bootstrap 3.3.6 -->
<link rel="stylesheet"
    href="resources/adminLTE/bootstrap/css/bootstrap.min.css">
<!-- Theme style -->
<link rel="stylesheet"
    href="resources/adminLTE/dist/css/AdminLTE.min.css">
<link rel="stylesheet"
    href="resources/adminLTE/download/css/font-awesome.min.css">

<!-- bootstrap wysihtml5 - text editor -->
<link rel="stylesheet"
    href="resources/adminLTE/plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.min.css">

<link rel="stylesheet"
    href="resources/adminLTE/dist/css/skins/_all-skins.min.css">

<!-- Morris chart -->
<link rel="stylesheet"
    href="resources/adminLTE/plugins/morris/morris.css">
<!-- jvectormap -->
<link rel="stylesheet"
    href="resources/adminLTE/plugins/jvectormap/jquery-jvectormap-1.2.2.css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
  <script src="resources/adminLTE/dist/css/skins/js/html5shiv.min.js"></script>
  <script src="resources/adminLTE/dist/css/skins/js/respond.min.js"></script>
  <![endif]-->
<title>考试</title>
</head>
<body>
    <section class="content">
        <div class="box">
            <div class="box box-solid">
                <div class="box-header with-border">
                    <h3 class="box-title">一键拍</h3>
                </div>
                <div class="box-body no-padding">
                    <canvas id="canvas" height="300px"></canvas>
                </div>
                <div class="footer">
                    <button type="button" id="btnPicture"
                        class="btn btn-block btn-success btn-lg">一键拍</button>
                    <input type="file" name="image" accept="image/*" capture="camera"
                        style="display: none">
                </div>
            </div>
        </div>
    </section>
    <!-- jQuery 2.2.3 -->
    <script src="resources/adminLTE/plugins/jQuery/jquery-2.2.3.min.js"></script>
    <!-- Bootstrap 3.3.6 -->
    <script src="resources/adminLTE/bootstrap/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="resources/js/view/onkeyPhoto.js"></script>
</body>
</html>

 JS代码如下：

var onkeyPhoto = {
    input : null,
    init : function() {
        onkeyPhoto.input = document.querySelector('input[type=file]');
        onkeyPhoto.input.onchange = function() {
            var file = onkeyPhoto.input.files[0];
            onkeyPhoto.drawOnCanvas(file);
        };
    },
    drawOnCanvas : function(file) {
        var reader = new FileReader();
        reader.onload = function(e) {
            var dataURL = e.target.result;
            var img = new Image();
            img.onload = function() {
                var square = 348;
                var canvas = document.querySelector('canvas');
                canvas.width = square;
                canvas.height = square * 1.2;
                var context = canvas.getContext('2d');
                context.clearRect(0, 0, canvas.width, canvas.height);
                var imageWidth = 360;
                var imageHeight = 240;
                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);
                // $('#imgData').val(base64.substr(22));
            };
            img.src = dataURL;
        };
        reader.readAsDataURL(file);
    },
    displayAsImage : function(file) {
        var imgURL = URL.createObjectURL(file), img = document
                .createElement('img');
        img.onload = function() {
            URL.revokeObjectURL(imgURL);
        };
        img.src = imgURL;
        document.body.appendChild(img);
    }
};
$(function() {
    onkeyPhoto.init();
    $('#btnPicture').click(function() {
        onkeyPhoto.input.click();
    });
});

 

posted @ 2016-10-21 18:14  modouer  阅读(469)  评论(0)    收藏  举报