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

本文作者:IMWeb DeepKolos 原文出处: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 条评论
登录 后参与评论

相关文章

来自专栏AI科技大本营的专栏

全文来了!打败DBA老炮,机器学习如何改变数据库管理系统

作者 | Dana Van Aken、Andy Pavlo、Geoff Gordon 编译 | AI100 数据库管理系统(DBMSs)是所有数据密集型应用的...

392120
来自专栏小白课代表

无需PS 一键编辑、压缩GIF。

微信公众平台规定GIF图不得超过2M,但是一张清楚的时间长的动图录制出来怎么可能那么小呢!还有聊天的时候,看到好玩的动图想要添加到表情,然后。。。

54510
来自专栏Petrichor的专栏

tensorflow: tensorboard 探究

  代码运行完成之后,可以用bash脚本一键浏览器访问tensorboard终端:

11910
来自专栏Laoqi's Linux运维专列

常见的负载均衡LVS、Nginx和HAProxy

44250
来自专栏祝威廉

Spark 1.6 内存管理模型( Unified Memory Management)分析

新的内存模型是在这个Jira提出的,JIRA-10000,对应的设计文档在这:unified-memory-management。

14530
来自专栏精讲JAVA

key / value 数据库的选型

这个项目有很多 key/value 数据(约 100 GB)需要使用,使用时基本是只读的,偶尔更新时才会批量导入,且可以忍受短暂的停机导入。我一想 TiKV 和...

59130
来自专栏知识分享

STM32采集电阻触摸贴膜

公司的项目用电阻屏,触摸的时候发现获取的位置会漂,后来自己发现是由于压力的问题....如果亲们用电阻屏发现触摸的位置有问题,可以看一下这篇文章,,先测量触摸的压...

33460
来自专栏吉浦迅科技

放下王者农药这锅,玩一把Tensorflow吧

暑期开始了!对于Lady姐来说,如何安排儿子的暑期生活是一件大事,显然是不能沉迷于王者农药, ? 于是Lady姐随手扔了一个教程给他:按照这份教程,在家里Win...

416100
来自专栏沃趣科技

容器化RDS|调度策略

前文我们介绍了基于 Kubernetes 实现的下一代私有 RDS. 其中, 调度策略是具体实现时至关重要的一环, 它关系到 RDS 集群的服务质量和部署密度....

399100
来自专栏MixLab科技+设计实验室

DIY一个以图搜图引擎1

大家好,凡关注本公众号的用户都可参与到这个小实验中来,基于微信头像的数据,我发现这几个有趣的事情(注意保密,以下都只显示头像,我也只能取到头像和昵称的数据,其他...

42470

扫码关注云+社区

领取腾讯云代金券