代码实现如下:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link href="css/mui.css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="css/mui.min.css"/>
</head>
<body>
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title"></h1>
</header>
<div class="mui-content">
<div id="msg">
此处为聊天信息
</div>
<button type="button" class="mui-btn mui-btn-grey" id="camera">摄像头</button>
</div>
<script src="js/mui.js"></script>
<script type="text/javascript">
mui.init();
mui.plusReady(function () {
var cw=plus.webview.currentWebview();
var titleName=cw.title;
var header=document.querySelector(".mui-title");
header.innerText=titleName;
})
var msgDom=document.getElementById("msg");
var caDom=document.getElementById("camera");
caDom.addEventListener("tap",function(){
var cm=plus.camera.getCamera(1);
cm.captureImage(function(path){
//把小路经转化长路径
var url="file://"+plus.io.convertLocalFileSystemURL(path);
var img="<img width=100 height=100 src="+url+">";
msgDom.innerHTML=img;
})
})
</script>
</body>
</html>
拍照过程图片:
实现效果: