Retina 显示屏下 @2x 图片的模拟

前几天在不小心看到传说中Apple在其网站让网页图片支持 Retina Display 的 JS image_replacer.js ,结果认真看了一下,代码中比较好玩的地方是用 ☃ 当“变量”,但核心实现却无比坑爹,居然是图片多做一份@2x 的版本,发现是高分屏,就把图片的地址换下。 =。=

在高分屏下,正常图片一般让人感觉模糊一点,条件允许的情况下,多做份@2x 的图片当然后是效果更好,并不是所有的图片都方便处理成@2x,有没有@2x的版本还不知道呢,程序如果能自动化处理的话,成本自然低了,不过,我还不知道有啥程序算法可以把已经丢了细节的图片还原回去。

这时我想起了 在HTML 5 的 Canvas 中应用卷积矩阵对图像处理,我偷拷了他的代码 顺便修改了处理图片边缘跟透明度的部分,做了个图片锐化的效果,如果你用电脑看的话,放大一下网页还是勉强可以看出效果,不过没 Retina Display 的设备明显,可以用iPhone 4+ 或者new iPad 试一下,或者看我的截图。

优点

  • 大部分图片效果比原来好,不用做@2x 的图片
  • 多终端统一维护,脚本渐进增强
  • 文件小省带宽,3G 时还是有一定的优势 用EDGE的就更不用说了。

缺点

  • 效果真心没 @2x的好,当然如果有更好的算法也难说
  • canvas 读图片数据存在跨域问题 (有所谓的解决方案,见后面)
  • 锐化目前的实现,基本就是读点的操作,大图片手机估计吃不消

以上方案纯属研究,如要投入生产还要再三考虑。

顺便说下 js可以能过 window.devicePixelRatio 来判断 是否为Retina。

canvas 读取跨域图片数据的解决方案

当年用的iframe 来解决跨域的方案再次改造实现,挖哈哈。在图片所在的域下放一网页用来读图片数据跟通讯,不过这次是改用 postMessage 来传图片数据。

这里有份之前实现的代码 github.com/aoao/Image64 ,那时是做图片分析时写的,有兴趣的同学可以看一下。如果有更好的方式也介绍给我,我一直觉得这方式太坑爹了,在电脑上用可能还行,在手机上跑可能比较不适合。

扩展阅读

This entry was posted in Web开发 and tagged , , , . Bookmark the permalink.

10 Responses to Retina 显示屏下 @2x 图片的模拟

  1. Pingback: IInterest'Blog

  2. a4 @ 2012-04-08 at 23:45

    好牛x

  3. Miller @ 2012-04-09 at 09:02

    真高端!

  4. 图图 @ 2012-04-10 at 16:15

    还是@2x效果好,看起来清晰。。

  5. 黑白 @ 2012-04-17 at 23:32

    还没怎么使用html5,HTML5现在很流行么?

  6. liupeng @ 2012-06-11 at 17:46

    哎,我现在给高分屏做的时候,都是做X2的图像,然后用background-size来控制1:1的大小。这样确实浪费了流量…而且如果图片变更大小的话,CSS也得随着修改,图片也比以前大多了~除了视觉无任何优势…

  7. Pingback: Retina屏幕前端视觉优化 | 天空实验室

  8. andy @ 2012-08-16 at 17:33

    我用rmbp,看后感觉效果真心不太好

  9. Pingback: Retina时代的前端视觉优化 | IInterest

  10. 熊宝 @ 2013-05-24 at 09:36

    请使用CSSGAGA,CSS神器,@2x 2 @1x 不是问题,不需要人肉

发表评论

(必填)

(必填)