[年会抽奖]调试头像尺寸

zouyang0921
1 parent cf9d491b
Showing 2 changed files with 74 additions and 44 deletions
mobile.html
mobile.js
@@ -63,7 +63,7 @@
         .pic-img-wrap {position: relative;width: 4.78rem;height: 4.78rem;margin: .5rem auto 0;box-sizing: border-box;padding: .96rem .92rem .98rem 1.02rem;}
         .pic-img-bg {position: absolute;top: 0;left: 0;z-index: 1;width: 100%;height: 100%;background: url('./img/mobile/pic_avatar_bg.png') no-repeat;background-size: 100% 100%;}
         .pic-avatar-wrap {width: 2.84rem;height: 2.84rem;border-radius: 50%;overflow: hidden;}
-        .pic-avatar {}
+        .pic-avatar {width: 2.84rem;}
         .pic-btn-wrap {position: absolute;bottom: 1.2rem;left: 50%;transform: translateX(-50%);width: 6.82rem;padding-bottom: .72rem;}
         .pic-btn-album {position: absolute;bottom: 0;left: 50%;transform: translateX(-50%);width: 3rem;display: flex;align-items: center;justify-content: center;}
         .pic-btn-album .album-text {font-size: .28rem;color: #fff;margin-right: .1rem;}
@@ -76,7 +76,7 @@
         .info-center {position: absolute;top: .4rem;left: 50%;transform: translateX(-50%);}
         .user-avatar {position: relative;width: 1.34rem;height: 1.4rem;box-sizing: border-box;padding-top: .24rem;padding-left: .18rem;margin: 0 auto;overflow: hidden;}
         .user-avatar .avatar-img-wrap {width: 1.14rem;height: 1.14rem;border-radius: 50%;overflow: hidden;}
-        .user-avatar .avatar-img {}
+        .user-avatar .avatar-img {width: 1.14rem;}
         .user-avatar .avatar-border {position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: url('./img/mobile/home_avatar.png') no-repeat;background-size: 100% 100%;}
         .info-center .user-name {text-align: center;font-size: .36rem;font-weight: 500;color: #C93120;margin-top: .1rem;}
         .info-main {position: absolute;bottom: .8rem;left: 50%;transform: translateX(-50%); width: 6.3rem; height: .82rem;display: flex;align-items: center;}
@@ -107,7 +107,7 @@ var action = {
         if (action.userInfo) {
             var userAvatar = action.userAvatar || defaultAvatar;
             $('#home_user_avatar').attr('src', userAvatar);
-            action.loadImage('.user-avatar .avatar-img', '.user-avatar .avatar-img-wrap');
+            action.loadImage(userAvatar, '.user-avatar .avatar-img', '.user-avatar .avatar-img-wrap');
             $('#home_user_name').html(action.userInfo.realname);
             $('#home_prize_no').html(action.userInfo.prize_no);
             $('#home_table_no').html(action.userInfo.table_no);
@@ -144,14 +144,9 @@ var action = {
                     localId: localIds.toString(), // 需要上传的图片的ID，由chooseImage接口获得
                     isShowProgressTips: 1, // 进度提示
                     success: function(res) {
-                        $('.pic-avatar').attr('src', localIds);
-                        $('.pic-avatar').css({
-                            width: '',
-                            height: '',
-                            'margin-left': '',
-                            'margin-top': ''
-                        });
-                        action.loadImage('.pic-avatar', '.pic-avatar-wrap');
+                        var imgHtml = '<img class="pic-avatar" src="' + localIds +'">';
+                        $('.pic-avatar-wrap').html(imgHtml);
+                        action.loadImage(localIds, '.pic-avatar', '.pic-avatar-wrap');
                         action.mediaId = res.serverId; // 返回图片的服务器端ID，即 mediaId
                         console.log('action.mediaId: ', action.mediaId);
                         $('#upload_unavailable').hide();
@@ -171,42 +166,77 @@ var action = {
             }
         });
     },
-    loadImage: function(dom, parent) {
+    loadImage: function(src, dom, parent) {
         var width = $(parent).width();
-        console.log('parent: ', width);
-        $(dom).on('load', function() {
-            var imgWidth = $(dom).width();
-            var imgHeight = $(dom).height();
-            console.log('dom--onload: ', $(dom));
-            console.log('width: ' + imgWidth);
-            console.log('height: ' + imgHeight);
-            var ratio = imgWidth / imgHeight;
-            if (ratio > 1) {
-                imgHeight = width;
-                imgWidth = width * ratio;
-                var margin = (imgWidth - width) / 2;
-                $(dom).css({
-                    width: imgWidth + 'px',
-                    height: imgHeight + 'px',
-                    'margin-left': -margin + 'px'
-                });
-            } else if (ratio < 1) {
-                imgWidth = width;
-                imgHeight = width / ratio;
-                var margin = (imgHeight - width) / 2;
-                $(dom).css({
-                    width: imgWidth + 'px',
-                    height: imgHeight + 'px',
-                    'margin-top': -margin + 'px'
-                });
-            } else {
-                $(dom).css({
-                    width: width + 'px',
-                    height: width + 'px'
-                });
+        console.log('parent-width: ', width);
+        var img = new Image();
+        img.src = src;
+        if (img.complete) {
+            console.log('img complete');
+        } else {
+            console.log('else');
+            img.onload = function() {
+                console.log('img onload');
+                console.log('width: ' + img.width);
+                console.log('height: ' + img.height);
+                var ratio = img.width / img.height;
+                if (ratio > 1) {
+                    img.height = width;
+                    img.width = width * ratio;
+                    var margin = (img.width - width) / 2;
+                    $(dom).css({
+                        'margin-left': -margin + 'px'
+                    });
+                } else if (ratio < 1) {
+                    img.width = width;
+                    img.height = width / ratio;
+                    var margin = (img.height - width) / 2;
+                    $(dom).css({
+                        'margin-top': -margin + 'px'
+                    });
+                } else {
+                    img.width = width;
+                    img.height = width;
+                }
             }
-        });
+        }
     },
+    // loadImage: function(dom, parent) {
+    //     var width = $(parent).width();
+    //     console.log('parent: ', width);
+    //     $(dom).on('load', function() {
+    //         var imgWidth = $(dom).width();
+    //         var imgHeight = $(dom).height();
+    //         console.log('dom--onload: ', $(dom));
+    //         console.log('width: ' + imgWidth);
+    //         console.log('height: ' + imgHeight);
+    //         var ratio = imgWidth / imgHeight;
+    //         if (ratio > 1) {
+    //             imgHeight = width;
+    //             imgWidth = width * ratio;
+    //             var margin = (imgWidth - width) / 2;
+    //             $(dom).css({
+    //                 width: imgWidth + 'px',
+    //                 height: imgHeight + 'px',
+    //                 'margin-left': -margin + 'px'
+    //             });
+    //         } else if (ratio < 1) {
+    //             imgWidth = width;
+    //             imgHeight = width / ratio;
+    //             var margin = (imgHeight - width) / 2;
+    //             $(dom).css({
+    //                 width: imgWidth + 'px',
+    //                 height: imgHeight + 'px',
+    //                 'margin-top': -margin + 'px'
+    //             });
+    //         } else {
+    //             $(dom).css({
+    //                 width: width + 'px',
+    //                 height: width + 'px'
+    //             });
+    //         }
+    //     });
+    // },
     // 上传头像
     uploadImage: function() {
         if (!action.mediaId) {