MUI 拍照和从系统相册选择图片上传

要完成用MUI 拍照和从系统相册选择图片上传的功能，可以理解成有三个功能

1 调用手机相机的功能(可以查看官方API http://www.html5plus.org/doc/zh_cn/camera.html)

2 调用系统相册的功能(可以查看官方API http://www.html5plus.org/doc/zh_cn/gallery.html)

3 照片资源上传到服务(可以查看官方API http://www.html5plus.org/doc/zh_cn/uploader.html)

下面是我的使用例子，

一，调用打开系统选择框按钮

document.getElementById('headImage').addEventListener('tap', function() {if (mui.os.plus) {var buttonTit = [{title: "拍照"}, {title: "从手机相册选择"}];plus.nativeUI.actionSheet({title: "上传图片",cancel: "取消",buttons: buttonTit}, function(b) { /*actionSheet 按钮点击事件*/switch (b.index) {case 0:break;case 1:getImage(); /*拍照*/break;case 2:galleryImg();/*打开相册*/break;default:break;}})}
}, false);

二，打开相机功能，拿到照片的路径

// 拍照获取图片
function getImage() {var c = plus.camera.getCamera();c.captureImage(function(e) {plus.io.resolveLocalFileSystemURL(e, function(entry) {var imgSrc = entry.toLocalURL() + "?version=" + new Date().getTime(); //拿到图片路径// 其他操作,比如预览展示}, function(e) {console.log("读取拍照文件错误：" + e.message);});}, function(s) {console.log("error" + s);}, {filename: "_doc/camera/"})
}

三，打开手机相册

// 从相册中选择图片
function galleryImg(){// 从相册中选择图片plus.gallery.pick( function(e){for(var i in e.files){var fileSrc = e.files[i];// 其他操作,比如预览展示}}, function ( e ) {console.log( "取消选择图片" );},{filter: "image",multiple: true,maximum: 5,system: false,onmaxed: function() {plus.nativeUI.alert('最多只能选择5张图片');}});
}

四，上传到服务器

// 上传的方法
function upload(){MicroTaskGUID = common.guid();var rul = "服务器地址"var imgsArr = mui(".task-img"); // 要上传的 img 标签mui.each(imgsArr, function(index, item){
//      console.log(index)
//      console.log(item.src)createUp(item)})function createUp (files) {var task = plus.uploader.createUpload(url,{method:"POST"},function(t,status){ //上传完成if(status==200){console.log("上传成功："+t.responseText);}else{console.log("上传失败："+status);}});//添加其他参数
//      task.addData("name","test");// 页面中要上传的 图片路径task.addFile(files.src,{key:files.src});task.start();}
}

MUI 拍照和从系统相册选择图片上传相关推荐

探索HTML5 Plus 拍照或者相册选择图片上传过程
起因:webApp中需要一个拍摄照片并上传服务器的功能由于我正好使用Hbuilder在做webApp,所以自然想到了使用h5+中的调用摄像头功能从此开始了踩坑之旅... 1.手机连接电脑问题 ...
关于小米手机从系统相册选择图片的一个bug
在开发应用的时候碰到一个问题,拍照或者从系统相册选择图片并上传,首先从相机或者相册获取图片并压缩处理,最后再上传,代码写好并基本测试通过,然而深度测试的时候却发现有一个问题. 在小米手机,即MIUI系 ...
学习笔记之Android调用系统相册选择图片
文章目录前言使用步骤小结参考资料前言在相册里选择图片上传也是很常见的功能了例如微信朋友圈等等.但是他们是自定义的选择器,可以选择多张图片并修改.这里我们讲一个最简单的:调用系统的相册选择一 ...
iOS学习：调用相机，选择图片上传，带预览功能
iOS学习:调用相机,选择图片上传,带预览功能发表于2年前(2013-05-30 21:38) 阅读( 18194) | 评论( 16) 27人收藏此文章,我要收藏赞3 8月22日珠海 OSC ...
android+代码调用+相册+小米,Android调用系统相册选择图片,支持小米4云相册
用小米4调用系统相册选择照片时,如果云相册功能开启的话.云相册中的图片也会显示在选择列表中.经过测试,选择到云相册中的图片的话,uri的scheme是file,而不再试content.本文支持云相册的 ...
AndroidStudio调用系统相册选择图片并显示、将图片保存到私有空间
有时候为了能让用户自定义软件的背景,我们需要实现从系统相册选择一张图片并将其进行保存,在后面打开的时候继续使用该图片充当背景.为什么要保存到私有空间呢?保存和到读取私有空间的内容是不需要权限的.由于实 ...
android 调用相册功能吗,Android调用系统相册选择图片,支持小米4云相册
用小米4调用系统相册选择照片时,如果云相册功能开启的话.云相册中的图片也会显示在选择列表中.经过测试,选择到云相册中的图片的话,uri的scheme是file,而不再试content.本文支持云相册的 ...
安卓开发小米4，酷派手机适配和调用系统相机相册做图片上传的问题
// 启动相机startCamera.setOnClickListener(new OnClickListener() {@Overridepublic void onClick(View v) {/ ...
h5 php 拍照上传图片,H5拍照、选择图片上传组件核心
背景前段时间项目重构,改成SSR的项目,但之前用的图片选择上传组件不支持SSR(server-side-render).遂进行了调研,发现很多的工具.但有的太大,有的使用麻烦,有的不满足使用需求.决 ...

MUI 拍照和从系统相册选择图片上传

MUI 拍照和从系统相册选择图片上传相关推荐

最新文章

热门文章