颠覆网络35天 ─ 内容感知的图片大小调整

原文地址:http://hacks.mozilla.org/2009/06/content-aware-image-resizing/

系列地址:颠覆网络35天

====================================

注意:演示的作者为Stéphane Roucheray,他是PIMS团队成员。这个演示最初是发表在Pims World Labs的博客上。

使用Firefox 3.5来观看演示!

内容感知的图片大小调整是一种能够在调整图片大小过程中感知其内容,而不去很大程度更改内容的调整比例,换句话说:非线性图片大小调整。该算法在2007年第一次由Shai Avidan和Ariel Shamir介绍给大家,并发表论文 (“Seam Carving for Content-Aware Image Resizing。”)

从那时开始,几个非常出色的开源项目都实现了相关算法和操作。例如,有针对GIMP开发的插件CAIR这样的基于C++的独立运行程序。

而现在,我们要感谢全新的Canvas和速度越来越快的JavaScript,我们可以不使用任何插件就在浏览器中实现这种操作。

从1.5版本开始,Firefox开始提供使用Canvas API的方法来控制位图数据的功能。而在3.5版本中,不仅仅介绍了史上最快的Firefox JavaScript引擎,同样提供了全新的Canvas API ─ createImageData ─ 提供了更强大的编程环境。

针对这个演示,内容感知的图片大小调整算法中的一部分使用JavaScript实现。在不改变高度的前提下,图片的宽度可以被自由交互的改变。这个演示使用了“接缝雕刻”的算法来调整图片大小、消除不重要的垂直区域。他是一个四步骤的迭代算法。每次迭代调整一个像素宽度大小。首先,把图片读取进Canvas上下文中,然后开始迭代:

  1. 计算出原始图片的灰度版本
  2. 计算出图片的边际 (这里我们使用Sobel convolution) 和能量矩阵
  3. 检测最低能量的接缝 (能量矩阵中从底到顶的一个像素宽度的垂直线条)
  4. 检测到的接缝像素从原图中移除,结果图片作为原图继续迭代步骤1

每一个步骤都会存储原始图片大小的数据矩阵。当这些矩阵不再代表图像而是作为算法的输入时,把他们存储在ImageData对象中会比使用简单数组更加方便。这也是为什么在这里使用Canvas的createImageData方法。其中最大的好处就是能够及时看到每一个中间步骤。

这个演示展示了我们可以使用更加智能的图片大小调整算法,而不仅仅是使用CSS来拉伸图片。在浏览器中直接拥有计算和图片控制能力展示了一个让用户操作图片的全新空间。而这仅仅是我们想象力的小演示~~

[译] 译言地址:http://www.yeeyan.com/articles/view/mijia/45191

Trackback/Pingback (1)

  1. Content Aware Image Resizing @ Mozilla Hacks | Lambda on Tuesday, June 9, 2009 at 8:14 pm

    […] Update : 内容感知的图片大小调整 Chinese Translation […]