前几天在不小心看到传说中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 ，那时是做图片分析时写的，有兴趣的同学可以看一下。如果有更好的方式也介绍给我，我一直觉得这方式太坑爹了，在电脑上用可能还行，在手机上跑可能比较不适合。

扩展阅读

• 应用卷积矩阵对图片进行模糊、锐化、浮雕等效果体验
• Retina Image Replacement for the New iPad