html调起苹果手机摄像头_使用HTML5+调用手机摄像头和相册

前言：

前端时间使用HTML5作了一个WEB端APP，其中用到了H5页面调用手机摄像头的功能，当时也是花了很多时间去研究。最终是采用了HTML5plus(HTML5+)的方式完成了该功能，现将具体方法简单介绍下，并讲解下使用的注意事项。

实例：

具体流程：点击触发选择拍照或相册-->拍照或相册选择照片-->拿到图片路径进行压缩-->读取文件并显示在页面上

首先是html代码，很简单，就是给一个添加按钮，点击触发事件，这里我就不把css文件放出来，你们知道是一个添加按钮就行。

图片描述

后面咱们来看下具体的js代码，按照上面咱们说的方法共分为5个方法，具体以下：

//图片显示

function showPics(url,name){

//根据路径读取到文件

plus.io.resolveLocalFileSystemURL(url,function(entry){

entry.file( function(file){

var fileReader = new plus.io.FileReader();

fileReader.readAsDataURL(file);

fileReader.onloadend = function(e) {

var picUrl = e.target.result.toString();

var picIndex = $("#picIndex").val();