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和文件存储来保 ...
随机推荐
- IMX6开发板Qtopia2.2.0开发环境搭建以及编译镜像
搭建 Qtopia2.2.0 开发环境,需要先搭建 Android 的编译环境,然后在 Android 编译环境的基础上,再搭建 Qtopia2.2.0 编译环境.以下内容基于迅为-iMX6开发板.Q ...
- UUID与时间戳
/** * 32位去除'-'的UUID */ public static String getUUID() { String uuid = java.util.UUID.randomUUID().to ...
- 17）C++开始--命名空间
命名空间:就是区分同一个名字,在不同的作用域的变量 代码展示 #include<iostream> namespace spaceA{ ; namespace spaceB{ struct ...
- 腾讯云 Serverless 首发 1ms 计费粒度，立省 70% 费用
云函数 SCF 采用按需付费的方式,并首次发布 1ms 计费粒度,真正实现按使用多少计算能力来计费. 云函数(Serverless Cloud Function,SCF)是腾讯云为企业和开发者们提供的 ...
- 服务端向客户端推送消息技术之websocket的介绍
websocket的介绍 在讲解WebSocket前,我们先来看看下面这种场景,在HTTP协议下,怎么实现. 需求: 在网站中,要实现简单的聊天,这种情况怎么实现呢?如下图: 当发送私信的时候,如果要 ...
- linux 上安装 keepalive
1.keepalive 单机安装 1.1 安装环境 yum -y install kernel-devel* openssl-* popt-devel lrzsz openssh-clients li ...
- pycharm2018后版本执行Flask app.run()深坑
在2018年以前的版本,以上配置在app.run()里面的内置方法
- [LC] 103. Binary Tree Zigzag Level Order Traversal
Given a binary tree, return the zigzag level order traversal of its nodes' values. (ie, from left to ...
- python后端面试第五部分：Linux操作系统--长期维护
################## Linux操作系统 ####################### 1,讲一下你常用的Linux/git命令和作用: 2,查看当前进程是用什么命 ...
- python面向对象小tips
(一).python鸭子类型 python作为动态语言继承和多态与静态语言(像java)有很大的不同:比如说在java中的某个方法,如果传入的参数是Animal类型,那么传入的对象必须是Animal类 ...