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

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

描点过程: 笨方法~

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

那么很显然了规律

还有使用测试图片得到的数据

那么算法就很容易看出来了 , 代码如下

//根据宽高比来设置外框的 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;

那么最终效果如下~

deepkolos

2017-08-16 11:11:23 +08:00

@firefox12 谢谢哈~ 说真的微信用起来简单, 直观 , 但是微信的细节不是一般的多 , 并且一些觉得很简单的细节其所支撑的数据都是很多的 , 同时也发现挺多微信的十分多细节的改变 , 比如 6.5.8 到 6.5.10 , 把我的二维码的页面统一使用一个页面来显示了, 之前我的二维码是有 3 个不同的显示方式的 , 应该是代码复用率提高了, 但是还是喜欢原本的显示方式 , 虽然我用得不多

还有我一年半前发现了微信 pen 了, 原本是无法直接看出来的, 但是使用了滑动返回 ,就可以看到了 , 高三暑假的时候发现的

https://www.zhihu.com/question/27428780/answer/70282983

还有有些地方的像临时工做的...比如 6.5.10 版本长按一个聊天消息 ,比如长按文件传输助手里面的一条消息 , 弹出菜单 , 点击更多 , 点击右上角的搜索按钮 , 这时候的搜索按钮是没有过度动画的...行为上和同类不相同... 我觉得返回的时候应该返回最初的默认状态的

deepkolos

2017-08-16 11:25:44 +08:00

微信的图片那个圆角加上指向头像的小三角的实现也不简单 , 首先圆角 ,我这边是使用 clip-path 的多边形来画的 , 就是圆角部分用多边形来画, 放大之后会出现尖角...目前还没有想到更好的解决办法 , 微信上面有个更吊的地方是这个边框 , 会有一个 1px 的边框 , 但是颜色并非固定的 , 是根据那个图片在边框的位置的像素点的变化而变化的...这个使用前端的东西就很难实现了.

图片贴到这里的后面了在微信 pen 的链接的后面了