使用JS调用手机摄像头和相册

Html

<h2 class="title-detail">图片描述</h2>
<input type="hidden" id="picIndex" value="0">
<div id='image-list' class="row image-list"><div class="image-item space" onclick="showActionSheet()"><div class="image-up"></div></div>
</div>

JS

//图片显示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();  }  }  );  }

原文：https://blog.csdn.net/u013185616/article/details/53195820

使用JS调用手机摄像头和相册相关推荐

利用JS调用手机摄像头小功能源码
介绍: 一个小功能源码,利用JS调用手机摄像头,当访问网址后就能拍摄照片,前提是客户端给了权限. 1.由于系统安全机制,ios系统必须使用自带的Safari浏览器(或者第三方APP调用的是Safari ...
使用HTML5+调用手机摄像头和相册
前言: 前端时间使用HTML5做了一个WEB端APP,其中用到了H5页面调用手机摄像头的功能,当时也是花了不少时间去研究.最终是采用了HTML5plus(HTML5+)的方式完成了该功能,现将具体方法 ...
html调起苹果手机摄像头_使用HTML5+调用手机摄像头和相册
前言: 前端时间使用HTML5作了一个WEB端APP,其中用到了H5页面调用手机摄像头的功能,当时也是花了很多时间去研究.最终是采用了HTML5plus(HTML5+)的方式完成了该功能,现将具体方法 ...
HTML5通过js调用手机摄像头
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
安卓调用手机摄像头和相册
文章目录调用摄像头和相册调用摄像头进行拍照从相册当中选取图片调用摄像头和相册调用摄像头进行拍照新建一个CameraAlbumTest项目,修改activity_main.xml中的代码 & ...
html5调用手机摄像头和相册,h5 调用手机摄像头/相册
html 部分 js 部分 getBase64: function (file, callback) { var maxWidth = 640 if (file.files && fi ...
html调起苹果手机摄像头_html5调取手机摄像头或相册
html5调用手机摄像头或者相册由于input的type=file 格式的文件的界面并不是我们所希望的界面,所以在此我隐藏input,自定义样式,这个样式就在中自己定义,这里我就不再定义了首先使 ...
java 调用手机相册_微信公众号调用手机摄像头拍照和本地相册
[实例简介] 微信公众号调用手机摄像头拍照和本地相册,上传服务器 [实例截图] [核心代码] 微信公众号调用手机摄像头拍照和本地相册(2) └── 微信公众号调用手机摄像头拍照和本地相册 └── 微信 ...
H5调用手机摄像头，实时拍照上传（旧）
H5调用手机摄像头,完成拍照,实时上传(旧) 项目开发中,偶尔会遇到网页中调用手机摄像头,通过相册选择或直接实时拍照的方式,完成图片上传的功能型需求. 今天,就通过一个小的案例,演示一下完整的实现流程 ...

使用JS调用手机摄像头和相册

Html

JS

使用JS调用手机摄像头和相册相关推荐

最新文章

热门文章