本文主要是介绍HTML5培训第16节课堂笔记，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
HTML5培训第16节课堂笔记
多媒体专题：
1. 拍照：
（1） 调用系统接口
var cam=plus.camera.getCamera(1);//number值 1 前置
（2） 拍照
拍照：var cam=plus.camera.getCamera(1);
cam.captureImage(function(path){
},function(e){
console.log(e.message);
},{
filename:"_doc/myimgs/",
index:1
});
（3） 手机拍照为相对路径，首先将相对路径转绝对路径
手机照片路径转换：plus.io.resolveLocalFileSystemURL(path,
function(entry){
realPath=entry.toLocalURL();
oimg.src=realPath;
});
完整路径：file:///storage/emulated/0/Andorid/......
（4） 预览效果 图片标签的方式 图片路径填到src
（5） //保存到相册
plus.gallery.save(path);//要相对路径
完整代码：
<style>
#myimg{
width:116px;
height:110px;
border:1pxsolid #ccc;
}
</style>
</head>
<body>
<headerclass="mui-bar mui-bar-nav">
<a class="mui-action-back mui-iconmui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">拍照测试</h1>
</header>
<divclass="mui-content">
<button class="mui-buttommui-active" id="camTest">拍照测试</button><br />
<img src=""id="myimg" />
</div>
<script>
mui.plusReady(function(){
varoimg=document.getElementById("myimg");
var realPath;
document.getElementById("camTest").addEventListener('tap',function(){
//调用系统接口
varcam=plus.camera.getCamera(1);//number值 1 前置
//拍照
cam.captureImage(function(path){
//预览效果 图片标签的方式图片路径填到src
//oimg.src=""
//手机拍照为相对路径， 首先将相对路径转绝对路径
plus.io.resolveLocalFileSystemURL(path,function(entry){
realPath=entry.toLocalURL();
oimg.src=realPath;
//Gallery手机上的图库
//保存在相册
plus.gallery.save(path);//要相对路径
} )//相对项目的地址 成功回调
},function(e){
console.log(e.message);
},{
filename:"_doc/myimgs/",
index:1//摄像机索引
});//成功，失败回调，拍照参数
})
})
//path:_doc/myimg/13333.jpg path传过来的值
//path只能相对路径 相对路径转绝对路径 用到IO
//图片在手机的绝对路径：file://storage/emulated/0/Android/data/io.dcloud.Hbuilder/
</script>
</body>
2. 上传照片：
<buttonid="upload">上传照片</button><br /><!--利用http post方式-->
<spanid="per"></span><br />
//上传照片
varuploadUrl="http://demo.dcloud.net.cn/helloh5/uploader/upload.php";
document.getElementById('upload').addEventListener('tap',function() {
//创建上传任务
var task=plus.uploader.createUpload(uploadUrl,{
method:"POST"
},function(res,status){// res http响应对象
//判断成功
if(status==200&&res.state==4)//请求成功 文件已经上传
{
varx=res.responseText;//得到响应
w.close();//用完关上
}
});//地址 配置 回调
//上传进度
//状态监听函数
task.addEventListener("statechanged",function(up,status){
//上传字节数/总的字节数
varpercent=parseInt(up.uploadedSize/up.totalSize*100)+"%";
per.innerHTML="已上传了"+percent;
},false);//up uploader对象
//文件加入 必须是本地路径 可以重新使用，一次提交多张照片
task.addFile(realPath,{key:Math.random()});//文件路径 文件标识
var w=plus.nativeUI.showWaiting();//系统等待对话框 成功后关闭
//上传开始
task.start();
})
自定义进度条
varw1=plus.nativeUI.showWaiting("请等待....",
{loading:{icon:"/img/waiting.png"}});
<buttonid="choose">选择照片</button><br />
<divid="photoList">
</div>
3. 选择图片
<buttonid="choose">选择照片</button><br />
<divid="photoList">
</div>
varplist=document.getElementById("photoList");
//选择照片
document.getElementById('choose').addEventListener('tap',function() {
plus.gallery.pick(function(e){
//成功函数 文件路径存到e中绝对路径
for(var i=0;i<e.files;i++)
{
var oimg=document.createElement("img");
oimg.className="img";
oimg.src=e.files[i];
plist.appendChild(oimg);
}
},function(e){
},{
//配置
filter:"image",//只选择图片
multiple:true,//能多选
system:false//一点图库，出来照片 false 为H5自己做的界面
});
})
这篇关于HTML5培训第16节课堂笔记的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
