刘鹏伟 / party · Commits

Commit 349e61144bc54d1976b833ee02f3eb523c8e140c

Authored by zouyang0921
1 parent 0da8cf92

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

Inline Side-by-side
Showing 1 changed file with 31 additions and 48 deletions
mobile.js
  View file @349e611
... ... @@ -107,7 +107,7 @@ var action = {
107 107 if (action.userInfo) {
108 108 var userAvatar = action.userAvatar || defaultAvatar;
109 109 $('#home_user_avatar').attr('src', userAvatar);
110   - action.loadImage('.user-avatar .avatar-img', userAvatar);
  110 + action.loadImage('.user-avatar .avatar-img');
111 111 $('#home_user_name').html(action.userInfo.realname);
112 112 $('#home_prize_no').html(action.userInfo.prize_no);
113 113 $('#home_table_no').html(action.userInfo.table_no);
... ... @@ -145,7 +145,7 @@ var action = {
145 145 isShowProgressTips: 1, // 进度提示
146 146 success: function (res) {
147 147 $('.pic-avatar').attr('src', localIds);
148   - action.loadImage('.pic-avatar', localIds);
  148 + action.loadImage('.pic-avatar');
149 149 action.mediaId = res.serverId; // 返回图片的服务器端ID，即 mediaId
150 150 console.log('action.mediaId: ', action.mediaId);
151 151 $('#upload_unavailable').hide();
... ... @@ -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 // 上传头像
... ...