前言:
前端时间使用HTML5做了一个WEB端APP,其中用到了H5页面调用手机摄像头的功能,当时也是花了不少时间去研究。最终是采用了HTML5plus(HTML5+)的方式完成了该功能,现将具体方法简单介绍下,并讲解下使用的注意事项。
实例:
具体流程:点击触发选择拍照或相册-->拍照或相册选择照片-->拿到图片路径进行压缩-->读取文件并显示在页面上
首先是html代码,很简单,就是给一个添加按钮,点击触发事件,这里我就不把css文件放出来,大家知道是一个添加按钮就行。
<h2 class="title-detail">
图片描述
</h2>
<input type="hidden" id="picIndex" value="0">
<div id='image-list' class="row image-list">
<!-- <input id="upload_image" type="file" name="image" accept="image/*" /> -->
<div class="image-item space" onclick="showActionSheet()">
<div class="image-up"></div>
</div>
</div>

后面我们来看下具体的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();
var nowIndex = parseInt(picIndex)+1;
$("#picIndex").val(nowIndex);
var html = '';
html += '<div class="image-item " id="item'+nowIndex+'">';
html += '<div class="image-close" onclick="delPic('+nowIndex+')">X</div>';
html += '<div><img src="'+picUrl+'" class="upload_img" style="width:100%;height:100%;"/></div>';
html += '</div>';
html += $("#image-list").html();
$("#image-list").html(html);
}
});
});
}
//压缩图片
function compressImage(url,filename){
var name="_doc/upload/"+filename;
plus.zip.compressImage({
src:url,//src: (String 类型 )压缩转换原始图片的路径
dst:name,//压缩转换目标图片的路径
quality:40,//quality: (Number 类型 )压缩图片的质量.取值范围为1-100
overwrite:true//overwrite: (Boolean 类型 )覆盖生成新文件
},
function(zip) {
//页面显示图片
showPics(zip.target,name);
},function(error) {
plus.nativeUI.toast("压缩图片失败,请稍候再试");
});
}

//调用手机摄像头并拍照
function getImage() {
var cmr = plus.camera.getCamera();
cmr.captureImage(function(p) {
plus.io.resolveLocalFileSystemURL(p, function(entry) {
compressImage(entry.toLocalURL(),entry.name);
}, function(e) {
plus.nativeUI.toast("读取拍照文件错误:" + e.message);
});
}, function(e) {
}, {
filter: 'image'
});
}
//从相册选择照片
function galleryImgs() {
plus.gallery.pick(function(e) {
var name = e.substr(e.lastIndexOf('/') + 1);
compressImage(e,name);
}, function(e) {
}, {
filter: "image"
});
}

//点击事件,弹出选择摄像头和相册的选项
function showActionSheet() {
var bts = [{
title: "拍照"
}, {
title: "从相册选择"
}];
plus.nativeUI.actionSheet({
cancel: "取消",
buttons: bts
},
function(e) {
if (e.index == 1) {
getImage();
} else if (e.index == 2) {
galleryImgs();
}
}
);
}

有几点进行说明下:(1):压缩图片方法,这里我采用的是重新写一个新文件  (2):图片显示方法,该方法很重要。因为我这边坐的是WEB端APP,页面都由服务器返回,我们可以拿到的是手机本地的图片,网上很多说法是直接拿文件路径就显示了,但是我却怎么都没显示出来。所以才用了FileReader将本地文件读取过来,e.target.result.toString();这个方法返回的就是我们的图片的base64编码,所以你看到下面我是动态拼HTML页面,直接将该内容赋值给img标签的src就可以直接显示图片。【这里曾经纠结很久】有了这个base64编码的url,我们就可以直接上传到后台。
使用注意:
这里主要讲打包工具不同需要做的工作也不太一样。我这边是用的Hbuilder在线打包,当然外壳也可以是Android环境打包,下面具体讲下要注意的地方。
Hbuilder:这个是一个很方便的web开发工具,可以在线打包APP。【由于网络问题,我上传不了图片,尽量文字描述】我们需要在Hbuilder里面建一个APP项目,点开manifest.json文件,这个文件就是我们APP的配置信息,下面导航栏分别为:应用信息、图标配置、启动Flash配置、SDK配置、权限模块配置等。一般我们需要配下应用信息(APP的名字、入口),图标,启动flash(可以选择启动图片),SDK配置一般是一些地图、支付、推送等。重点来了,我们如果使用HTML5+,需要在模块权限配置里面,选择我们用到的功能,比如我们用到了plus.nativeUI.*,就需要选择NativeUI(原生UI)模块,也就是说,我们用了plus.xx.*,就需要勾选相应的模块。【这个manifest.json是可视化界面,大家下载安装就能明白】
Android环境:相对Hbuilder,Android环境稍微复杂一点,由于我没有在Android环境里搞过这个,这里只是介绍下Hbuilder官网的一些使用说明。
举例说明:例如我们需要使用Camera对象,需要做如下配置:

2.1:添加camera.jar。

2.2:AndroidManifest.xml permission节点中添加:

<uses-permission android:name="android.permission.CAMERA"/>
           <uses-feature android:name="android.hardware.camera"/>

2.3:properties.xml features节点中添加:

<featurename="Camera" value="io.dcloud.js.camera.CameraFeatureImpl"/>

这个配置方式在Hbuilder的官网上可以下载,里面包含所有的jar包和不同的权限所需的配置。

使用HTML5+调用手机摄像头和相册的更多相关文章

  1. html5调取手机摄像头或相册

    html5调用手机摄像头或者相册 由于input的type=file 格式的文件的界面并不是我们所希望的界面,所以在此我隐藏input,自定义样式,这个样式就在<a>中自己定义,这里我就不 ...

  2. html5调用手机摄像头,实现拍照上传功能

    今天做手机网站,想实现手机扫描二维码功能.首先实现在浏览器中调用手机摄像头,实现拍照功能并且把拍下的照片显示在页面并上传到服务器上,然后再在服务器端进行分析. 首先实现在浏览器中调用摄像头,当然用现在 ...

  3. 怎样让HTML5调用手机摄像头拍照——实践就是一切

    原文:怎样让HTML5调用手机摄像头拍照--实践就是一切 NanShan 小编将思路提供给了大家.学编程最重要的是实践,我这尽管有完好的代码,可是希望大家都能够自己写出属于自己的代码 HTML5 Th ...

  4. HTML5调用手机摄像头,仅仅支持OPPOHD浏览器

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. HTML5调用手机摄像机、相册功能 <input>方法

    最近用MUI框架做webapp项目,在有PLUS环境的基础上能直接调用手机底层的API来使用拍照或从相册选择上传功能! 在查资料的时候,想起了另一种用input调用摄像和相册功能的方法,之前没有深入了 ...

  6. html5调用手机摄像头

    <input type="file" accept="image/*" capture="camera"><input t ...

  7. js 调用手机摄像头或相册并展示图片

    效果图 手机浏览器.微信打开该网页,都支持调用摄像头拍照和打开相册. 先看最终结果: 每次点击“点击上传”,可以选择相册或者拍照,选完以后可以多展示一张图片,同时上传服务器. 点击“重新上传”,清空所 ...

  8. getUserMedia API及HTML5 调用手机摄像头拍照

    getUserMedia API简介 HTML5的getUserMedia API为用户提供访问硬件设备媒体(摄像头.视频.音频.地理位置等)的接口,基于该接口,开发者可以在不依赖任何浏览器插件的条件 ...

  9. html5调用手机摄像头(图片可多选 限pc)

    html5自带的 input file=”” ,纯html5,并且不涉及到js ,就可以实现.代码如下: <input type="file" accept="im ...

随机推荐

  1. RobotFramework模拟手机浏览器

    转自 http://blog.csdn.net/max229max/article/details/70808867 感谢max bai提供的思路 Python - Selenium Chrome 模 ...

  2. css3 混合模式mix-blend-mode background-blend-mode 以及混合模式的隔断 isolation

    css 混合模式 mix-blend-mode: 让 元素内容 和 这个元素 以及 下面的元素 发生混合 background-blend-mode 背景的混合模式 可以是背景图片的混合也可以是背景图 ...

  3. Ajax 异步查询 ,刷新页面的一部分

    调用的过程是,通过Jquery注册单击事件,当单击分部视图中的按钮,就取得分部视图中文本框的值,然后调用$.Get()函数以Get形式调用控制器SearchPeople方法,参数为searchText ...

  4. oracle 备份数据

    exp AC_SSO/AC_SSO@HB file=d:\wamp\Golden3C_AuthenticationCenter.dmp owner=AC_SSO full=y用户名/密码@服务 exp ...

  5. bzoj 4080: [Wf2014]Sensor Network【瞎搞+随机化】

    参考:https://blog.csdn.net/YihAN_Z/article/details/73380387 一点都不想写正解.jpg random_shuffle一下然后贪心的加点,和ans取 ...

  6. POJ2482 Stars in Your Window(扫描线+区间最大+区间更新)

    Fleeting time does not blur my memory of you. Can it really be 4 years since I first saw you? I stil ...

  7. hdu 3966 Aragorn's Story

    Aragorn's Story Time Limit: 10000/3000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) To ...

  8. 员工管理系统(集合与IO流的结合使用 beta5.0 BufferedReader/ BufferedWriter)

    package cn.gee; public class Emp { private String id;//员工编号 一般是唯一的 private String sname; private int ...

  9. 加权平均值 WAvg”

    https://wenku.baidu.com/view/13d974fff8c75fbfc77db2d3.html

  10. 关于如何读取XML文件的一个简单方法

    在平时开发系统功能的时候,我们经常会碰到一些需求需要经常性的发生变化,比如 系统版本.更新日志 等等.这个时候用一个XML文件来替代数据库,就会变的简便很多. 前段时候我也正好需要改个需求,是关于客户 ...