微信聊天图片大小生成算法~
本文作者：IMWeb DeepKolos 原文出处：IMWeb社区 未经同意，禁止转载
今天仿微信聊天时候的图片大小, 描了十几个点 , 用了半个早上的苦力时间 , 把结果分享一下下~
描点过程: 笨方法~
- 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;那么最终效果如下~
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读