微信聊天图片大小生成算法~

今天仿微信聊天时候的图片大小 , 描了十几个点 , 用了半个早上的苦力时间 , 把结果分享一下下~

描点过程: 笨方法~

1. PS生成对应规格的图片
2. 发送到手机微信
3. 截图 ,发送回电脑 用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