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

【分享】获取图片地址插件(新增返回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