基于mui开发webApp,用户头像拍照上传,相册选取上传

js关键代码片段:

   /*点击头像触发*/ 
             document.getElementById('headImage').addEventListener('tap', function() { 
                    if (mui.os.plus) { 
                        var a = [{ 
                            title: "拍照" 
                        }, { 
                            title: "从手机相册选择" 
                        }]; 
                        plus.nativeUI.actionSheet({ 
                            title: "修改用户头像", 
                            cancel: "取消", 
                            buttons: a 
                        }, function(b) { /*actionSheet 按钮点击事件*/ 
                            switch (b.index) { 
                                case 0: 
                                    break; 
                                case 1: 
                                    getImage(); /*拍照*/ 
                                    break; 
                                case 2: 
                                    galleryImg();/*打开相册*/ 
                                    break; 
                                default: 
                                    break; 
                            } 
                        }) 
                    } 
                }, false); 



    //拍照 
            function getImage() { 
                var c = plus.camera.getCamera(); 
                c.captureImage(function(e) { 
                    plus.io.resolveLocalFileSystemURL(e, function(entry) { 
                        var s = entry.toLocalURL() + "?version=" + new Date().getTime(); 
                        uploadHead(s); /*上传图片*/ 
                    }, function(e) { 
                        console.log("读取拍照文件错误:" + e.message); 
                    }); 
                }, function(s) { 
                    console.log("error" + s); 
                }, { 
                    filename: "_doc/head.png" 
                }) 
            } 




    //本地相册选择 
            function galleryImg() { 
                plus.gallery.pick(function(a) { 
                    plus.io.resolveLocalFileSystemURL(a, function(entry) { 
                        plus.io.resolveLocalFileSystemURL("_doc/", function(root) { 
                            root.getFile("head.png", {}, function(file) { 
                                //文件已存在 
                                file.remove(function() { 
                                    console.log("file remove success"); 
                                    entry.copyTo(root, 'head.png', function(e) { 
                                            var e = e.fullPath + "?version=" + new Date().getTime(); 
                                            uploadHead(e); /*上传图片*/ 
                                            //变更大图预览的src 
                                            //目前仅有一张图片,暂时如此处理,后续需要通过标准组件实现 
                                        }, 
                                        function(e) { 
                                            console.log('copy image fail:' + e.message); 
                                        }); 
                                }, function() { 
                                    console.log("delete image fail:" + e.message); 
                                }); 
                            }, function() { 
                                //文件不存在 
                                entry.copyTo(root, 'head.png', function(e) { 
                                        var path = e.fullPath + "?version=" + new Date().getTime(); 
                                        uploadHead(path); /*上传图片*/ 
                                    }, 
                                    function(e) { 
                                        console.log('copy image fail:' + e.message); 
                                    }); 
                            }); 
                        }, function(e) { 
                            console.log("get _www folder fail"); 
                        }) 
                    }, function(e) { 
                        console.log("读取拍照文件错误:" + e.message); 
                    }); 
                }, function(a) {}, { 
                    filter: "image" 
                }) 
            }; 




    //上传头像图片 
            function uploadHead(imgPath) { 
            	var mainImage = document.getElementById("headImage");
                console.log("imgPath = " + imgPath); 
                mainImage.src = imgPath; 
                mainImage.style.width = "90px"; 
                mainImage.style.height = "90px"; 
     
                var image = new Image(); 
                image.src = imgPath; 
                image.onload = function() { 
              var imgData = getBase64Image(image); 
                    /*在这里调用上传接口*/ 
             var userId=plus.storage.getItem('userId');
			mui.ajax(httpUrl+'appPath/appPath!ajaxUploadImg?userId='+userId,{
				data:{imgData:imgData},
				dataType:'json',//服务器返回json格式数据
				type:'post',//HTTP请求类型
				timeout:10000,//超时时间设置为10秒;
				success:function(data){
					console.log('上传成功'); 
				},
				error:function(xhr,type,errorThrown){
					mui.toast('网络异常,请稍后再试!'); 
				}
			});
                } 
        } 
            //将图片压缩转成base64 
            function getBase64Image(img) { 
                var canvas = document.createElement("canvas"); 
                var width = img.width; 
                var height = img.height; 
                // calculate the width and height, constraining the proportions 
                if (width > height) { 
                    if (width > 100) { 
                        height = Math.round(height *= 100 / width); 
                        width = 100; 
                    } 
                } else { 
                    if (height > 100) { 
                        width = Math.round(width *= 100 / height); 
                        height = 100; 
                    } 
                } 
                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); 
                return dataURL.replace("data:image/png;base64,", ""); 
            }    

		function photoerror(img){
			img.src="img/mryh.png";
			img.null;   //控制不要一直跳动
		}
  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值