MUI使用H5+Api调取系统相册多图选择及转base64码
伟大的哲学家曾说过
“写代码，一定要翻文档”
这次我们需要用到的是调取系统相册进行多图上传，
先奉上html5+api关于系统相册的文档链接
链接:HTML5+ API Reference & gallery
首先一点，我们在使用5+Api前都需要在manifest.json文件中进行功能模块的添加，
当然用Hbuilder的话大部分模块都已在内，这里是关于相册的模块
{
// ...
"permissions":{
// ...
"Gallery": {
"description": "系统相册"
}
}
}另外，5+Api需在plusReady事件之后
//mui封装的方法
mui.plusReady(function(){
// ...
});
//5+写法
document.addEventListener( "plusready", function(){
// ...
}, false );进入正题，多图上传的核心代码为以下代码
我们可以设置多种参数，请查阅文档
// 从相册中选择图片
function galleryImg() {
// 从相册中选择图片
console.log("从相册中选择图片:");
plus.gallery.pick( function(path){
console.log(path);
}, function ( e ) {
console.log( "取消选择图片" );
}, {filter:"image"} );
}以下是多图上传的demo
请在包含配置文件和mui css及js项目中打开
iOS模拟器调试会闪退，真机不会，具体原因未知
<!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.min.css" rel="stylesheet" />
<style type="text/css">
.mui-bar{
height: 64px;
padding-top: 20px;
}
.mui-content{
padding-top: 64px !important;
}
.width{
position: absolute;
width: 100%;
min-height: 100%;
top: 50%;
transform: translateY(-50%);
-ms-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-o-transform: translateY(-50%);
}
.height{
position: absolute;
height: 100%;
min-width: 100%;
left: 50%;
transform: translateX(-50%);
-ms-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-webkit-transform: translateX(-50%);
-o-transform: translateX(-50%);
}
.tips{
padding: 12px;
}
.tips p{
margin: 0;
line-height: 1.5
}
.photo-list{
background-color: #fff;
padding: 6px;
}
.photo-list .photo-box , .add-btn{
position: relative;
float: left;
margin: 1%;
width: 23%;
height: 0;
padding-bottom: 23%;
border-radius: 3px;
overflow: hidden;
}
.add-btn{
border: dashed 1px #DDD;
font-size: 30px;
}
.delete{
font-size: 20px;
}
.add-btn , .delete{
position: relative;
font-family: Muiicons;
font-weight: 400;
font-style: normal;
line-height: 1;
display: inline-block;
text-decoration: none;
-webkit-font-smoothing: antialiased;
}
.add-btn:after{
content: '\e468';
position: absolute;
left: 50%;
top: 35%;
transform: translateX(-50%);
color: #aaa;
}
.delete:after{
content: '\e401';
position: absolute;
left: 50%;
transform: translateX(-50%);
color: #fff;
}
.photo-box .delete{
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 24px;
background-color: rgba(0,0,0,.4);
}
</style>
</head>
<body>
<header class="mui-bar mui-bar-nav">
<h1 class="mui-title">从相册上传图片</h1>
</header>
<div class="mui-content">
<div class="tips">
<p>上传照片</p>
</div>
<div class="photo-list mui-clearfix" id="list">
<div class="photo-box">
<img src="../images/activity1.png" />
<div class="delete"></div>
</div>
<div class="add-btn" id="btn"></div>
</div>
</div>
<script src="../js/mui.min.js"></script>
<script type="text/javascript">
mui.init();
//DOM获取及变量
var list = document.getElementById('list');
var btn = document.getElementById('btn');
var setNum = 9 ; //图片最大选择数量
/* *
* 调取系统相册需在API加载完成后发生
*/
mui.plusReady(function(){
//添加图片按钮点击
btn.addEventListener('tap',function(){
var num = setNum;
if( list.querySelector('.photo-box') ){
var box = list.getElementsByClassName('photo-box');
num -= box.length;
}
galleryImgs( num );
});
},false);
// 从相册中选择多张图片
function galleryImgs( num ){
// 从相册中选择图片
console.log("从相册中选择多张图片:");
plus.gallery.pick( function(e){
for(var i in e.files){
console.log( e.files[i] );
insertPhoto( e.files[i] ); //将图片放在页面上
}
}, function ( e ) {
console.log( "取消选择图片" );
},{
filter : "image", //系统相册选择器中可选择的文件类型 "image" , "video" , "none"
multiple : true, //是否支持多选
maximum : num, //最多选择的文件数量，上面设置了全局变量
system : false, //是否使用系统文件选择界面，iOS下无效
onmaxed : function(){ //超出选择最大文件数时触发
mui.toast( '最多选择' + num + '张图片' )
}
});
}
//将选择的图片转base64并加入到页面中
function insertPhoto ( data ){
var imgClass ; //img的class名
//创建image对象并转换base64码
var img = new Image();
img.src = data ;
img.onload = function(){
//创建canvas画布
var canvas = document.createElement("canvas");
//在css中不要直接给img设置宽高,否则此处会获取到css设置的值
var width = img.width;
var height = img.height;
//比较图片宽高设置图片显示和canvas画布尺寸
if (width > height) {
imgClass = 'height';
if (width > 500) {
height = Math.round(height *= 500 / width);
width = 500;
}
} else {
imgClass = 'width';
if (height > 500) {
width = Math.round(width *= 500 / height);
height = 500;
}
}
canvas.width = width; //设置新的图片的宽度
canvas.height = height; //设置新的图片的长度
var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0, width, height); //绘图
var dataURL = canvas.toDataURL("image/png", 0.8); //供img标签使用的src路径
//将最后拿到的图片类名和src放入页面中
var div = document.createElement('div');
div.setAttribute('class','photo-box');
div.innerHTML = '<img class="' + imgClass + '" src="' + dataURL + '"/>\
<div class="delete"></div>';
list.insertBefore( div , btn );
btnHidden(); //显示或隐藏添加按钮
}
}
//删除
mui('#list').on('tap','.delete',function(){
this.parentNode.remove();
btnHidden(); //显示或隐藏添加按钮
})
// 在5+文档中关于多图选择参数中 maximum 的解释是
// 取值范围为1到Infinity，默认值为Infinity，即不限制选择的图片数。 如果设置的值非法则使用默认值Infinity。
// 我们在点击是会使用 -= 来出来 pNum ，会得到负值而导致使用默认值
// 故在每次添加图片时进行判断，是否隐藏添加按钮
function btnHidden(){
if ( list.querySelector('.photo-box') ) {
var box = list.getElementsByClassName('photo-box');
if( box.length > setNum - 1 ){
btn.classList.add('mui-hidden');
} else {
btn.classList.remove('mui-hidden');
}
} else {
btn.classList.remove('mui-hidden');
}
}
</script>
</body>
</html>MUI使用H5+Api调取系统相册多图选择及转base64码的更多相关文章
- MUI 单图片压缩上传（拍照+系统相册）： 选择立即上传
1 html 部分 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> < ...
- MUI 单个图片上传预览（拍照+系统相册）：先选择->预览->上传提交
1 html部分 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> < ...
- mui 访问系统相册将图片显示到网页
访问系统相返回值为一个对象,通过转换为字符串可以查看,path.files[0]为返回路径去除路径赋值到src 调用摄像头返回的相片的path为一个路径通过 plus.io.resolveLocalF ...
- Android 获取系统相册中的所有图片
Android 提供了API可获取到系统相册中的一些信息,主要还是通过ContentProvider 来获取想要的内容. 代码很简单,只要熟悉ContentProvider 就可以了. public ...
- Swift—调用系统相册和相机
p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 24.0px Menlo; color: #000000 } p.p2 { margin: 0.0px 0. ...
- 基于mui的H5套壳APP开发web框架分享
前言 创建一个main主页面,只有主页面有头部.尾部,中间内容嵌入iframe内容子页面,如果在当前页面进行跳转操作,也是在iframe中进行跳转,而如果点击尾部按钮切换模块.页面,那就切换ifram ...
- ASP.NET Web API路由系统：路由系统的几个核心类型
虽然ASP.NET Web API框架采用与ASP.NET MVC框架类似的管道式设计,但是ASP.NET Web API管道的核心部分(定义在程序集System.Web.Http.dll中)已经移除 ...
- ASP.NET Web API路由系统：Web Host下的URL路由
ASP.NET Web API提供了一个独立于执行环境的抽象化的HTTP请求处理管道,而ASP.NET Web API自身的路由系统也不依赖于ASP.NET路由系统,所以它可以采用不同的寄宿方式运行于 ...
- ImageLoader框架的使用、调用系统相册显示图片并裁剪显示、保存图片的两种方式
ImageLoader虽然说是一个相对于比较老的一个框架了 ,但是总的来说,还是比较好用的,今天我就总结了一下它的用法.还有调用系统相册并裁剪,以及,通过sharedpreference和文件存储来保 ...
随机推荐
- 吴裕雄--天生自然python机器学习：KNN-近邻算法在手写识别系统上的应用
需要识别的数字已经使用图形处理软件,处理成具有相同的色 彩和大小® : 宽髙是32像 素 *32像素的黑白图像.尽管采用文本格式存储图像不能有效地利用内 存空间,但是为了方便理解,我们还是将图像转换为 ...
- “全隐藏式3D摄像头”亮相，FindX如何将设计与体验融为一体
北京时间6月20日,OPPO在卢浮宫发布暌违四年之久的Find旗舰系列新手机--Find X.在Find X背后,我认为其设计值得深思.尤其是Find X为突破传统设计束缚,首创双轨潜望结构有着重要启 ...
- Web Service概述 及 应用案例
Web Service的定义 W3C组织对其的定义如下,它是一个软件系统,为了支持跨网络的机器间相互操作交互而设计.Web Service服务通常被定义为一组模块化的API,它们可以通过网络进行调用 ...
- 86）PHP，PDO常用函数
(1) (2) 举例:假如我的sql语句有问题,那么我输出这两个函数所产生的信息. 还有一组函数: 分别是,开启事务,回滚事务,提交事务,判断是否处于事务中. errorInfo() 错误信 ...
- Grails Controller - redirect 方法
官方文档: http://docs.grails.org/latest/ref/Controllers/redirect.html 网页跳转方法1: // 在一个Action中直接跳转到另外一个Act ...
- python3下scrapy爬虫(第七卷:编辑器内执行scrapy）
之前我们都是在终端切入到scrapy的路境内执行爬虫的,你要多敲多少行的字节,所以这次我们谈谈如何在编辑器里执行,这个你可以用在爬虫中,当你使用PYTHONWEB开发时尽量不要在编辑器内启动端口服务那 ...
- C# Dictionary字典类介绍
说明 必须包含名空间System.Collection.Generic Dictionary里面的每一个元素都是一个键值对(由二个元素组成:键和值) 键必须是唯一的,而值不需要唯 ...
- echart封装，前端简单路由，图表设置自动化
https://github.com/cclient/EhartDemoSetByAngular 后端node.js 前端插件 echart,jquery,jqueryui,datapicker,an ...
- Java IO: FileOutputStream
原文链接 作者: Jakob Jenkov 译者: 李璟(jlee381344197@gmail.com) FileOutputStream可以往文件里写入字节流,它是OutputStream的子类, ...
- 微信发送朋友圈URL JSAPI事件demo
<script> var imgUrl = 'http://m.ximiyu.com/content/images/thumbs/0000126_540.jpeg'; var lineLi ...