今天仿微信聊天時(shí)候的圖片大小 , 描了十幾個(gè)點(diǎn) , 用了半個(gè)早上的苦力時(shí)間 , 把結(jié)果分享一下下~
描點(diǎn)過(guò)程: 笨方法~
- PS生成對(duì)應(yīng)規(guī)格的圖片
- 發(fā)送到手機(jī)微信
- 截圖 ,發(fā)送回電腦 用PS記錄大小
描點(diǎn)數(shù)據(jù):
注: 40表示的是寬高比為40% 也就是0.4
40 -> 203 509
41 -> 203 498
42 -> 203 481
43 -> 203 476
44 -> 203 460
45 -> 203 452
46 -> 203 438
47 -> 203 435
48 -> 203 419
49 -> 203 416
50 -> 203 407
51 -> 203 407
52 -> 209 405
55 -> 219 405
60 -> 243 405
70 -> 283 405
80 -> 324 405
90 -> 364 405
100-> 405 405
110-> 405 364
120-> 405 337
那么很顯然了規(guī)律
還有使用測(cè)試圖片得到的數(shù)據(jù)
file
那么算法就很容易看出來(lái)了 , 代碼如下
注: 寬高比 可以通過(guò)$img.naturalWidth / $img.naturalHeight取得
//根據(jù)寬高比來(lái)設(shè)置外框的size
if (ratio < 0.4 ){
width = 204; //這是從微信截圖的長(zhǎng)度最后需要同一除以3
height = 510;
$img.parentElement.classList.add('overflowHeight'); //設(shè)置高度溢出部分隱藏
}else if(ratio >= 0.4 && ratio <= 0.5){
width = 204;
height = 204/ratio;
} else if(ratio > 0.5 && ratio < 1) {
width = 405 * ratio;
height = 405;
} else if(ratio >= 1 && ratio < 1/0.5) { //和前面的寬高轉(zhuǎn)置
height = 405 * (1/ratio);
width = 405;
} else if (ratio >= 1/0.5 && ratio < 1/0.4) {
height = 204;
width = 204 / (1/ratio);
} else if (ratio >= 1/0.4) {
height = 204; //這是從微信截圖的長(zhǎng)度最后需要同一除以3
width = 510;
$img.parentElement.classList.add('overflowWidth');
}
height /= 3;
width /= 3;
那么最終效果如下~
file
file
