• 手机相册管理(gallery) ---- HTML5+


    模块gallery

    Gallery模块管理系统相册,支持从相册中选择图片或视频文件、保存图片或视频文件到相册等功能。通过plus.gallery获取相册管理对象。

    管理我们手机上用到的相册:选择图片,和保存图片;

    应用场景:朋友圈发照片,QQ空间发视频,添加图片附件,添加视频附件;

    这个不需要初始化(new): 它有两个核心的方法:pick() 选取,save();保存;

    void plus.gallery.pick(successCB,errorCB,option);
    void plus.gallery.save(path,successCB,errorCB);

    option选项:

    animation //是否显示系统相册文件选择界面的动画,可取值true、false,默认值为true。
    filename //某些系统不能直接使用系统相册的路径,这时需要将选择的文件保存到应用可访问的目录中,可通过此参数设置保存文件的路径。
    filter //系统相册选择器中可选择的文件类型,可设置为仅选择图片文件(“image”)、视频文件(“video”)或所有文件(“none”),默认值为“image”。
    maximum //仅在支持多选时有效,取值范围为1到Infinity,默认值为Infinity,即不限制选择的图片数。 如果设置的值非法则使用默认值Infinity。
    multiple //(Boolean 类型 )是否支持多选图片
    onmaxed: //(Function 类型 )超过最多选择图片数量事件
    popover: //(PopPosition 类型 )相册选择界面弹出指示区域
    selected: //(Array[ String ] 类型 )已选择的图片路径列表
    system: //(Boolean 类型 )是否使用系统相册文件选择界面

    具体示例

    <header class="mui-bar mui-bar-nav">
        <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
        <h1 class="mui-title">手机相册管理</h1>
    </header>
    <div class="mui-content mui-content-padded">
        <button type="button" id="btnselectImg" class="mui-btn mui-btn-blue mui-btn-block">选择一张图片</button>
        <img src="" alt="" id="selectImg" />
        <button type="button" id="btnselectMoreImg" class="mui-btn mui-btn-blue mui-btn-block">多选图片</button>
        <div id="imglist"></div>
    </div>
    <script src='http://libs.baidu.com/jquery/1.8.3/jquery.min.js'></script>
    <script src="js/mui.min.js"></script>
    <script type="text/javascript">
    mui.plusReady(function(){
        // 选择一张图片
        $("#btnselectImg").bind('tap',function(){
            plus.gallery.pick(function(file){
                plus.io.resolveLocalFileSystemURL(file,function(entry){
                    $("#selectImg").attr("src",entry.fullPath);
                });
            },function(e){},{});
        });
        //多选图片
        $("#btnselectMoreImg").bind('tap',function(){
            plus.gallery.pick(function(event){
                var files = event.files;
                for(var i=0;i<files.length;++i){
                    var file = files[i];
                    plus.io.resolveLocalFileSystemURL(file,function(entry){
                        //$("#imglist").attr("src",entry.fullPath);
                        $("#imglist").append("<img src='"+entry.fullPath+"' />");
                    });
                }
            },function(e){},{});
        });
    });
    </script>
  • 相关阅读:
    PIL 和 pythonopencv 从内存字节码中读取图片并转为np.array格式
    【转载】 什么是元类
    【转载】 Py之cupy:cupy的简介、安装、使用方法之详细攻略
    【转载】 vscode如何在最新版本中配置c/c++语言环境中的launch.json和tasks.json?
    【转载】 Ubuntu下使用VSCode的launch.json及tasks.json编写
    Javascript高级程序设计第二版第六章面向对象程序设计(ObjectOriented Programming)简称OOP编程笔记
    Javascript高级程序设计第二版第五章引用类型笔记
    css权重简单之谈
    编辑神器VIM下安装zencoding
    显示层3s后隐藏
  • 原文地址:https://www.cnblogs.com/e0yu/p/7850602.html
Copyright © 2020-2023  润新知