专栏首页IMWeb前端团队微信聊天图片大小生成算法~

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

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

描点过程: 笨方法~

  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

那么很显然了规律

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

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

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

那么最终效果如下~

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

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

    本文作者:IMWeb DeepKolos 原文出处:IMWeb社区 未经同意,禁止转载 今天仿微信聊天时候的图片大小, 描了十几个点 , 用了半个早上...

    IMWeb前端团队
  • 【IMWeb】前端圈外部分享沙龙精彩回顾!

    本文作者:IMWeb link 原文出处:IMWeb社区 未经同意,禁止转载 ? 10月17号,IMWeb团队跟广州前端圈合作,在腾大二楼多功能厅,进...

    IMWeb前端团队
  • 怎样让开源项目看起来“高大上”

    为了避免重复造轮子,我们往往会借助开源的项目实现一些功能。很多时候,选择使用哪一个开源项目就像选择男、女朋友一样,固然内在很重要,但是眼缘也很关键,只有看对了眼...

    IMWeb前端团队
  • 微信聊天图片大小生成算法~

    本文作者:IMWeb DeepKolos 原文出处:IMWeb社区 未经同意,禁止转载 今天仿微信聊天时候的图片大小, 描了十几个点 , 用了半个早上...

    IMWeb前端团队
  • Excel公式技巧14: 在主工作表中汇总多个工作表中满足条件的值

    我们可能熟悉使用INDEX、SMALL等在给定单列或单行数组的情况下,返回满足一个或多个条件的值的列表。这是一项标准的公式技术。

    fanjy
  • 工具|Vigenere的暴力破解

    创作背景 之前参加了几次CTF比赛常常在Misc中遇到维吉尼亚密码破译的题目,大多是解出来了,但是痛点是都是手动分析进行解题,耽误了很多时间,最近想要解脱双手,...

    漏斗社区
  • 每日一题(8)

    解析: java在处理自增自减时,会使用临时变量存储,计算后再返回该值 自增自减原理一样,此处以自增为例

    KEN DO EVERTHING
  • Kotlin语法基础之继承

    Kotlin中所有的类都有一个公有的超类:Any,这是所有没有声明超类的类的默认父类。 class Example //隐式继承自Any Any!=Java...

    xiangzhihong
  • Redis实现类似同步方法调用的功能(一)

    kongxx
  • 最大似然估计 最大后验估计

    MLE: 首先看机器学习基础篇——最大后验概率关于离散分布的举例(就是樱桃/柠檬饼干问题) 可见,MLE是在各种概率中,找出使发生事实概率最大的那个概率。 ...

    平凡的学生族

扫码关注云+社区

领取腾讯云代金券