怎么在HTML5中利用Canvas调用手机拍照功能

发布时间：2021-03-10 15:46:47 来源：亿速云阅读：263 作者：Leah 栏目：web开发

本篇文章为大家展示了怎么在HTML5中利用Canvas调用手机拍照功能，内容简明扼要并且容易理解，绝对能使你眼前一亮，通过这篇文章的详细介绍希望你能有所收获。

<html>  <meta name="viewport" content="height=device-height, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">  <meta name="format-detection" content="telephone=yes">  <head>   <meta charset="UTF-8">   <title>上传证件</title>   <style>   body {    margin: 20px 20%;    color:#777;    text-align: center;   }   #result{    margin-top: 20px;   }   </style>  </head>  <body>   <h2 class="text-center">上传证件...</h2>   <hr/>   <input type="file"/>   <div id="result" align="center"></div>   <hr/>     <!-- 引入jQuery -->   <script type="text/javascript" src="../js/jQuery/jquery-1.9.1.min.js"></script>   <script type="text/javascript" src="../js/LocalResizeIMG.js"></script>     <!-- mobileBUGFix.js 兼容修复移动设备 -->   <script src="../js/mobileBUGFix.mini.js" type="text/javascript"></script>   <script type="text/javascript">   $("input:file").localResizeIMG({    width: 500,    quality: 0.8,    success: function (result) {    var img = new Image();    img.src = result.base64;    console.log(result.clearBase64);    //$("body").append(img);    $("#result").empty();    $("#result").append(img); //呈现图像(拍照結果)    $.ajax({     url: "upLoadImageServlet",     type: "POST",     data:{formFile:result.clearBase64},     dataType: "HTML",     timeout: 1000,     error: function(){     alert("Error loading PHP document");     },     success: function(result){     //alert(result);     //console.log(result);     alert("Uploads success~")     }    });    }   });   </script>  </body>  </html>

上面实现的流程导致是这样的，首先在前端把图片进行压缩，因为手机的不同，可能有的手机拍照给力，像素高，拍出来的图片的大小就相对大一些，所以这里通过一个插件进行了压缩，然后转换成为Base64的编码，再把Base64的编码使用AJAX来POST到服务器，然后在Java或者PHP后台进行Base64解码，解出来的路径即为上传图片的路径地址，然后再进行存储，写到文件或者数据库里面。

此外，这里需要说明一个问题：很多人都说到了微信内置浏览器，之前我也一直认为微信内置浏览器就是微信自己开发的一套浏览器，然后对很多东西进行了限制。其实不是这样的，微信本身并没有再重新开发一套浏览器，而是调用的系统自身的浏览器，是根据手机的不同系统而变化的。微信内置浏览器调用的是手机系统默认浏览器，ios和Android系统默认浏览器都是webkit内核，只是对HTML5和CSS3的支持程度可能不同。因为浏览器只是系统的一部分，因此系统默认浏览器不会单独升级，对HTM5、CSS3的支持程度与系统版本有很大关系。安卓版微信直接调用系统浏览器内核, iOS则是调用safari,大家可以看到下面1和3的效果是一模一样的，1是微信浏览器打开的，3则是魅族MX 3自带的系统浏览器打开的效果。

上面我的我都测试过了，可以正常运行。下面附上几张照片：

1、这是在微信里面打开的效果

怎么在HTML5中利用Canvas调用手机拍照功能