前端攻城师
前端攻城师
  • 发布:2017-08-07 10:20
  • 更新:2019-01-25 15:47
  • 阅读:5665

【分享】获取图片地址插件(新增返回base64)

分类:HTML5+
/**  
 * 获取图片地址  
 * varstion 1.0.2  
 * by Allen-Fei  
 * tipefi@126.com  
 * 参数列表:  
 * success(picUrl, base64)——图片地址获取成功的回调,返回图片地址及base64  
 * 基于zepto或jq、mui------仅限手机端  
 */  
(function(window, undefind) {  
    var layer = '<div id="selectLayer" class="mui-popover mui-popover-bottom mui-popover-action ">'  
    layer += '<ul class="mui-table-view" id="imgLayer">'  
    layer += '<li class="mui-table-view-cell">'  
    layer += '<span>拍照</span>'  
    layer += '</li>'  
    layer += '<li class="mui-table-view-cell">'  
    layer += '<span>从相册选择</span>'  
    layer += '</li>'  
    layer += '</ul>'  
    layer += '<ul class="mui-table-view">'  
    layer += '<li class="mui-table-view-cell">'  
    layer += '<a href="#selectLayer" id="cancelos"><b>取消</b></a>'  
    layer += '</li>'  
    layer += '</ul>'  
    layer += '</div>'  
    $("body").append(layer);  
    //选择方式事件  
    $("body").on("tap", "#imgLayer li", function() {  
        var i = $(this).parent().children().index(this)  
        if(i == 0) {  
            getImgURL.getImages();  
        }else{  
            getImgURL.getPhoto();  
        }  
        mui('#selectLayer').popover('hide');  
    })  

    $('body').on('tap', '#cancelos', function(){  
        evalID('my-proname.html',['closeDis']);  
    })  

    var getImgURL = window.getImgURL = {  
        init: function(option){ // 初始化方法  
            var that = this;  
            that.o = option;  
            mui('#selectLayer').popover('toggle');  

        },  
        getImages: function(){ // 拍照方法  
            var that = this;  
            var cmr = plus.camera.getCamera(); // 相机对象  
            cmr.captureImage(function(p) { // 拍照事件  
                    that.rotateImg(p);  
                }, function(error) {  
                    that.o.error(error);  
                    console.log("---" + "捕获图像失败: " + error.message);  
                }, {} //建议使用系统匹配路径  
            );  
        },  
        getPhoto: function(){ // 打开相册方法  
            var that = this;  
            plus.gallery.pick(function(path) { // 从系统相册选择图片  
                that.rotateImg(path);             
            }, function(error) {  
                that.o.error(error);  
                console.log("---" + "捕获图像失败: " + error.message);  
            })  
        },  
        rotateImg: function(p) { // 图片处理方法(包括旋转,因在IOS中会有图片读取时会自动旋转,导致读取后的文件不正确)  
            var that = this;  
            if(p.indexOf('http') < 0) {  
                plus.zip.compressImage({  
                    src: p,  
                    dst: p,  
                    overwrite: true,  
                    rotate: 0 // 不管有没有被旋转,统一旋转0度  
                }, function(e) {  
                    if(mui.os.ios){ // 此处IOS需做路径转换处理,在转换时利用文件对象再去转base64,而安卓则直接可以用路径去加载文件  
                        plus.io.resolveLocalFileSystemURL(e.target, function(entry){  
                            entry.file(function(path){  
                                console.log("P__" + JSON.stringify(path));  
                                that.getBase64(path, e.target);   
                            })  
                        });   
                    } else{  
                        that.getBase64(e.target, e.target);  
                    }  
                }, function(error) {  
                    that.o.error(error);  
                    console.log("图片旋转时发生错误!");  
                });  
            } else {  
                that.o.success(p); // 如遇http地址,则直接返回该地址;  
            }  

        },  
        getBase64: function(path, url){                     // 获取Base64  
            var that = this;  
            var reader = new plus.io.FileReader();          // 构建文件对象  
            reader.readAsDataURL(path);                     // 添加文件(此处安卓可以直接添加文件路径,而IOS则需要文件对象)  
            reader.onloadend = function (event) {           // 文件加载 完成后的事件回调  
                //console.log('event'+JSON.stringify(event));  
                that.o.success(url, event.target.result);   // 执行成功函数,统一把路径及base64传过去  
            };  
        }  

    }  

})(window)
2 关注 分享
7***@qq.com 3***@qq.com

要回复文章请先登录注册

l***@qq.com

l***@qq.com

怎么用?我引入了以后什么反应都没有
2019-01-25 15:47
1***@qq.com

1***@qq.com

666
2018-09-21 10:12
3***@qq.com

3***@qq.com

厉害了
2018-06-15 13:45
7***@qq.com

7***@qq.com

牛逼
2018-01-02 20:55