Commit 349e61144bc54d1976b833ee02f3eb523c8e140c
1 parent
0da8cf92
[年会抽奖]修复上传头像变形
Showing
1 changed file
with
31 additions
and
48 deletions
mobile.js
| @@ -107,7 +107,7 @@ var action = { | @@ -107,7 +107,7 @@ var action = { | ||
| 107 | if (action.userInfo) { | 107 | if (action.userInfo) { |
| 108 | var userAvatar = action.userAvatar || defaultAvatar; | 108 | var userAvatar = action.userAvatar || defaultAvatar; |
| 109 | $('#home_user_avatar').attr('src', userAvatar); | 109 | $('#home_user_avatar').attr('src', userAvatar); |
| 110 | - action.loadImage('.user-avatar .avatar-img', userAvatar); | 110 | + action.loadImage('.user-avatar .avatar-img'); |
| 111 | $('#home_user_name').html(action.userInfo.realname); | 111 | $('#home_user_name').html(action.userInfo.realname); |
| 112 | $('#home_prize_no').html(action.userInfo.prize_no); | 112 | $('#home_prize_no').html(action.userInfo.prize_no); |
| 113 | $('#home_table_no').html(action.userInfo.table_no); | 113 | $('#home_table_no').html(action.userInfo.table_no); |
| @@ -145,7 +145,7 @@ var action = { | @@ -145,7 +145,7 @@ var action = { | ||
| 145 | isShowProgressTips: 1, // 进度提示 | 145 | isShowProgressTips: 1, // 进度提示 |
| 146 | success: function (res) { | 146 | success: function (res) { |
| 147 | $('.pic-avatar').attr('src', localIds); | 147 | $('.pic-avatar').attr('src', localIds); |
| 148 | - action.loadImage('.pic-avatar', localIds); | 148 | + action.loadImage('.pic-avatar'); |
| 149 | action.mediaId = res.serverId; // 返回图片的服务器端ID，即 mediaId | 149 | action.mediaId = res.serverId; // 返回图片的服务器端ID，即 mediaId |
| 150 | console.log('action.mediaId: ', action.mediaId); | 150 | console.log('action.mediaId: ', action.mediaId); |
| 151 | $('#upload_unavailable').hide(); | 151 | $('#upload_unavailable').hide(); |
| @@ -165,52 +165,35 @@ var action = { | @@ -165,52 +165,35 @@ var action = { | ||
| 165 | } | 165 | } |
| 166 | }); | 166 | }); |
| 167 | }, | 167 | }, |
| 168 | - loadImage: function(dom, src) { | ||
| 169 | - var img = new Image(); | ||
| 170 | - img.src = src; // 改变图片的src | ||
| 171 | - console.log('img: ', img); | ||
| 172 | - if (img.complete) { // 判断是否有缓存 | ||
| 173 | - console.log(1); | ||
| 174 | - var width = parseInt($(dom).css('width')); | ||
| 175 | - console.log('dom-width: ', width); | ||
| 176 | - console.log('img-width: ' + img.width, 'img-height: ' + img.height); | ||
| 177 | - var ratio = img.width / img.height; | ||
| 178 | - if (ratio > 1) { | ||
| 179 | - img.height = width; | ||
| 180 | - img.width = width * ratio; | ||
| 181 | - var margin = (img.width - img.height) / 2; | ||
| 182 | - $(dom).css("margin-left", -margin + 'px'); | ||
| 183 | - } else if (ratio < 1) { | ||
| 184 | - img.width = width; | ||
| 185 | - img.height = width / ratio; | ||
| 186 | - var margin = (img.width - img.height) / 2; | ||
| 187 | - $(dom).css("margin-top", margin + 'px'); | ||
| 188 | - } else { | ||
| 189 | - img.width = width; | ||
| 190 | - img.height = width; | ||
| 191 | - } | ||
| 192 | - } else { // 加载完成执行 | ||
| 193 | - console.log(2); | ||
| 194 | - img.onload = function() { | ||
| 195 | - var width = parseInt($(dom).css('width')); | ||
| 196 | - console.log('dom-width: ', width); | ||
| 197 | - console.log('img-width: ' + img.width, 'img-height: ' + img.height); | ||
| 198 | - var ratio = img.width / img.height; | ||
| 199 | - if (ratio > 1) { | ||
| 200 | - img.height = width; | ||
| 201 | - img.width = width * ratio; | ||
| 202 | - var margin = (img.width - img.height) / 2; | ||
| 203 | - $(dom).css("margin-left", -margin + 'px'); | ||
| 204 | - } else if (ratio < 1) { | ||
| 205 | - img.width = width; | ||
| 206 | - img.height = width / ratio; | ||
| 207 | - var margin = (img.width - img.height) / 2; | ||
| 208 | - $(dom).css("margin-top", margin + 'px'); | ||
| 209 | - } else { | ||
| 210 | - img.width = width; | ||
| 211 | - img.height = width; | ||
| 212 | - } | ||
| 213 | - } | 168 | + loadImage: function(dom) { |
| 169 | + var width = $(dom).width(); | ||
| 170 | + var height = $(dom).height(); | ||
| 171 | + var imgWidth = '', imgHeight = ''; | ||
| 172 | + console.log('width: ' + width, 'height: ' + height); | ||
| 173 | + var ratio = width / height; | ||
| 174 | + if (ratio > 1) { | ||
| 175 | + imgHeight = width; | ||
| 176 | + imgWidth = width * ratio; | ||
| 177 | + var margin = (imgWidth - width) / 2; | ||
| 178 | + $(dom).css({ | ||
| 179 | + width: imgWidth + 'px', | ||
| 180 | + height: imgHeight + 'px', | ||
| 181 | + 'margin-left': -margin + 'px' | ||
| 182 | + }); | ||
| 183 | + } else if (ratio < 1) { | ||
| 184 | + imgWidth = width; | ||
| 185 | + imgHeight = width / ratio; | ||
| 186 | + var margin = (imgHeight - width) / 2; | ||
| 187 | + $(dom).css({ | ||
| 188 | + width: imgWidth + 'px', | ||
| 189 | + height: imgHeight + 'px', | ||
| 190 | + 'margin-top': -margin + 'px' | ||
| 191 | + }); | ||
| 192 | + } else { | ||
| 193 | + $(dom).css({ | ||
| 194 | + width: width + 'px', | ||
| 195 | + height: width + 'px' | ||
| 196 | + }); | ||
| 214 | } | 197 | } |
| 215 | }, | 198 | }, |
| 216 | // 上传头像 | 199 | // 上传头像 |