[年会抽奖]修复上传头像变形

zouyang0921
1 parent 349e6114
Showing 1 changed file with 51 additions and 28 deletions
mobile.js
@@ -145,7 +145,7 @@ var action = {
                     isShowProgressTips: 1, // 进度提示
                     success: function (res) {
                         $('.pic-avatar').attr('src', localIds);
-                        action.loadImage('.pic-avatar');
+                        action.loadImage('.pic-avatar', localIds);
                         action.mediaId = res.serverId; // 返回图片的服务器端ID，即 mediaId
                         console.log('action.mediaId: ', action.mediaId);
                         $('#upload_unavailable').hide();
@@ -165,35 +165,58 @@ var action = {
             }
         });
     },
-    loadImage: function(dom) {
+    loadImage: function(dom, src) {
         var width = $(dom).width();
-        var height = $(dom).height();
-        var imgWidth = '', imgHeight = '';
-        console.log('width: ' + width, 'height: ' + height);
-        var ratio = width / height;
-        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'
-            });
+        var img = new Image();
+        img.src = src; // 改变图片的src
+        if (img.complete) { // 判断是否有缓存
+            console.log('img complete');
+            console.log('width: ', width);
+            console.log('img-width: ' + img.width, 'img-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;
+            }
         } else {
-            $(dom).css({
-                width: width + 'px',
-                height: width + 'px'
-            });
+            img.onload = function() {
+                console.log('img onload');
+                console.log('width: ', width);
+                console.log('img-width: ' + img.width, 'img-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;
+                }
+            }
         }
     },
     // 上传头像