今天仿微信聊天时候的图片大小 , 描了十几个点 , 用了半个早上的苦力时间 , 把结果分享一下下~
描点过程: 笨方法~
- PS生成对应规格的图片
- 发送到手机微信
- 截图 ,发送回电脑 用PS记录大小
描点数据:
注: 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
那么很显然了规律
还有使用测试图片得到的数据
file
那么算法就很容易看出来了 , 代码如下
注: 宽高比 可以通过$img.naturalWidth / $img.naturalHeight取得
//根据宽高比来设置外框的size
if (ratio < 0.4 ){
width = 204; //这是从微信截图的长度最后需要同一除以3
height = 510;
$img.parentElement.classList.add('overflowHeight'); //设置高度溢出部分隐藏
}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) { //和前面的宽高转置
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; //这是从微信截图的长度最后需要同一除以3
width = 510;
$img.parentElement.classList.add('overflowWidth');
}
height /= 3;
width /= 3;
那么最终效果如下~
file
file
