【分享】关于用户头像的处理

负暄 · 发表于 2016-6-16 21:33:29

本帖最后由负暄于 2016-6-16 21:46 编辑

http://bbs.wex5.com/forum.php?mod=viewthread&tid=91095&extra=

《拍照与图片上传》这个帖子是我在做用户更换头像时整理分享的。在功能实现以后，又根据想法的深入陆续做如下优化。今天见到论坛里有同学问到这个问题，特此整理出来，跟大家分享，也请大神们指教。

1、对于初次注册的用户，让人在输入信息的时候还要拍照上传，会显得很麻烦。为简化注册流程，我采用了提供默认头像的策略，使其可以快速完成注册，快速进入系统使用。以后有闲暇、有心情再慢慢折腾头像。因此在新增user表时，我将fImage字段默认赋值 "./user/img/default.png"，并在相应的目录下提供了图片。
2、未更换头像的用户，在登录后，显示头像的函数改为如下代码，这样保证了默认头像与用户更换的头像的兼容。
      //显示用户头像 Bind-attr-src
      //兼容默认头像，自定义头像。
      Model.prototype.transUrl = function(fImage,fOwnerID) {

            var defaultImage = '';
            var defaultUrl = './user/img/default.png';
            if((!fImage)||(fImage==defaultUrl)){
                     //默认
                     defaultImage = require.toUrl(defaultUrl);
            }else{
                     //自定义
                     // this.actionUrl是在model中定义的变量就是后台定义的浏览图片的baas
                     //this.actionUrl = "/baas/summer/classes/browsePicfile";
                     var url = this.actionUrl + '?storeFileName=' + fImage + '&ownerID=' + fOwnerID ;

                     defaultImage = require.toUrl(url);
            }

            return defaultImage;
      };

负暄 · 发表于 2016-6-16 21:40:08

本帖最后由负暄于 2016-6-29 08:21 编辑

3、头像上传时，保证一个用户一个文件，不产生垃圾文件。因此对上传函数也做了改进。
      //调用bass图片上传
      Model.prototype.uploadPic = function(imageData){

            //用户信息，用于上传图片后保存图片链接fImage
            var userid = this._UserID;
            var userBaasData = this.comp("userBaasData");
            var storeFileName =  "";
            var imageJson = {};

            if (this._UserImage != null && this._UserImage != "" && this._UserImage != "[]" && this._UserImage != "./user/img/default.png") {
                     storeFileName =this._UserImage;
                     if(!storeFileName){
                              storeFileName = justep.UUID.createUUID(); //如果已经传过头像，则沿用原来的文件名。保证一个用户只有一个头像文件。
                     }
            }else{
                     storeFileName = justep.UUID.createUUID();//没有上传过，则产生新的文件名
            }

            justep.Baas.sendRequest({
            "url" : "/summer/classes",
            "action" : "uploadPicfile",
            "async" : false,
            "params" : {
                     "picData" : imageData,
                     "ownerID" : userid,
                     "storeFileName" : storeFileName
            },
            "success" : function(data) {

                     justep.Util.hint("图片上传成功");

                     //修改数据库中的图片链接
                     userBaasData.setFilter("Idfilter", "fID='"+userid+"'");
                     userBaasData.refreshData();
                     if(userBaasData.getCount()>0){
                              var fImage = storeFileName;
                              userBaasData.setValue("fImage", fImage);
                              userBaasData.saveData();
                     }
            }
         });

      };

我是猿 · 发表于 2016-6-17 09:44:50

负暄发表于 2016-6-16 21:40
3、头像上传时，保证一个用户一个文件，不产生垃圾文件。因此对上传函数也做了改进。
//调用bass图 ...

大神，我有个问题，截图头像能截成圆形的么？？？我试着把截图的样式改成圆形，但结果不是圆形的，怎么办？？

负暄 · 发表于 2016-6-17 10:28:18

我是猿发表于 2016-6-17 09:44
大神，我有个问题，截图头像能截成圆形的么？？？我试着把截图的样式改成圆形，但结果不是圆形的，怎么办 ...

这是css 功能，把image的class设成img-circle就行了。

我是猿 · 发表于 2016-6-17 11:29:48

负暄发表于 2016-6-17 10:28
这是css 功能，把image的class设成img-circle就行了。

把哪个image设置成那个class???是原图片还是截图框还是效果框？img-circle只要设置了这个class属性，就能截图成圆形吗？？谢谢

liuyong · 发表于 2016-6-20 16:07:32

请问，this._UserImage这个怎么定义的？

laalaa · 发表于 2016-7-10 11:10:32

可以把头像文件保存成图片格式吗

23Luckystar · 发表于 2017-1-3 14:22:30

大神我问一下，数据库连接地址不变，头像名称不变，新头像上传了，在界面上bind-attr-src还是显示之前的头像，通过连接地址访问的是新头像，这个image绑定baasData有缓存吗？

		自动登录	找回密码
密码			注册

[分享] 【分享】关于用户头像的处理

评分