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

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 2646 天前的主题，其中的信息可能已经有所发展或是发生改变。

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

描点过程: 笨方法~

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

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

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

第 1 条附言 · 2017-08-16 07:53:27 +08:00

加 13px 是那个指向头像的小三角的宽度 , 前面的已经加上 13px , 测试图片的数据是后面才加上的

第 2 条附言 · 2017-08-17 08:36:45 +08:00

对于宽高比小于屏幕宽高比的图片 , 双击放大默认是放大一倍

11 条回复 • 2017-08-16 11:25:44 +08:00

zpvip

2017-08-15 20:03:18 +08:00

真不错，值得收藏

FanWall

2017-08-15 20:05:00 +08:00 via Android

不错辛苦了

flyingghost

2017-08-15 20:31:16 +08:00

辛苦了！

zizifu

2017-08-15 21:25:00 +08:00

有需要的呀。。。收藏

maypu

2017-08-15 23:59:26 +08:00 via Android

不错，很棒

zirconium

2017-08-16 08:21:24 +08:00

不错，蟹蟹

firefox12

2017-08-16 10:37:35 +08:00 via iPhone

细节是魔鬼。需要的就是这样的踏实

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

sofs

2017-08-16 11:14:27 +08:00

辛苦了，srmsmy

deepkolos

2017-08-16 11:14:39 +08:00

@firefox12 还有一个地方行为怪怪的 , 就是在聊天窗口里面查看放大的图片的时候 , 不会添加左右滑动锁... 就是当你左滑一段距离 , 然后再往下滑动 , 一定几率会触发下滑关闭...

deepkolos

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

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

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