V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
deepkolos
V2EX  ›  程序员

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

  •  3
     
  •   deepkolos ·
    deepkolos · 2017-08-15 19:11:41 +08:00 · 8125 次点击
    这是一个创建于 2658 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

    描点过程: 笨方法~

    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
    
    那么很显然了规律
    

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

    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
        1
    zpvip  
       2017-08-15 20:03:18 +08:00
    真不错,值得收藏
    FanWall
        2
    FanWall  
       2017-08-15 20:05:00 +08:00 via Android
    不错 辛苦了
    flyingghost
        3
    flyingghost  
       2017-08-15 20:31:16 +08:00
    辛苦了!
    zizifu
        4
    zizifu  
       2017-08-15 21:25:00 +08:00
    有需要的呀。。。收藏
    maypu
        5
    maypu  
       2017-08-15 23:59:26 +08:00 via Android
    不错,很棒
    zirconium
        6
    zirconium  
       2017-08-16 08:21:24 +08:00
    不错,蟹蟹
    firefox12
        7
    firefox12  
       2017-08-16 10:37:35 +08:00 via iPhone
    细节是魔鬼。需要的就是这样的踏实
    deepkolos
        8
    deepkolos  
    OP
       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
        9
    sofs  
       2017-08-16 11:14:27 +08:00
    辛苦了,srmsmy
    deepkolos
        10
    deepkolos  
    OP
       2017-08-16 11:14:39 +08:00
    @firefox12 还有一个地方行为怪怪的 , 就是在聊天窗口里面 查看放大的图片的时候 , 不会添加左右滑动锁... 就是当你左滑一段距离 , 然后再往下滑动 , 一定几率会触发下滑关闭...
    deepkolos
        11
    deepkolos  
    OP
       2017-08-16 11:25:44 +08:00
    微信的图片那个 圆角加上指向头像的小三角的实现也不简单 , 首先圆角 ,我这边是使用 clip-path 的多边形来画的 , 就是圆角部分用多边形来画, 放大之后会出现尖角...目前还没有想到更好的解决办法 , 微信上面有个更吊的地方是这个边框 , 会有一个 1px 的边框 , 但是颜色并非固定的 , 是根据那个图片在边框的位置的像素点的变化而变化的...这个使用前端的东西就很难实现了.

    图片贴到这里的后面了在微信 pen 的链接的后面了
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   880 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 23ms · UTC 20:53 · PVG 04:53 · LAX 12:53 · JFK 15:53
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.