颠覆网络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

Comments (18)

  1. Patients must understand that diet plan has actually been revealed to have little or no influence on acne.

    Sunday, December 20, 2015 at 7:34 am #
  2. asfus00g0tg wrote::

    atarax cephalexin 500 mg capsules atarax

    Friday, June 10, 2016 at 11:56 am #
  3. asfusqyi6b4 wrote::

    click this link viagra soft citalopram ventolin

    Friday, June 10, 2016 at 12:15 pm #
  4. asfusl63z13 wrote::

    atarax on line viagra can i buy cytotec over the counter buy cephalexin

    Wednesday, June 15, 2016 at 4:47 am #
  5. asfustureox wrote::

    buy trazodone online wellbutrin buy bupropion

    Tuesday, June 28, 2016 at 11:40 pm #
  6. asfushj3tay wrote::

    buy sildalis buy cialis online no prescription zovirax cream pfizer viagra 100mg

    Saturday, July 9, 2016 at 1:57 am #
  7. asfusz5m83n wrote::

    wellbutrin generic cost femara tenormin amitriptyline synthroid generic

    Monday, July 18, 2016 at 10:48 pm #
  8. asfusnqb7f7 wrote::

    quibron-t prednisone pak tadalafil

    Tuesday, July 19, 2016 at 8:30 am #
  9. asfusc7b119 wrote::

    http://buysildenafil.gdn/ – buy sildenafil online http://superavana.trade/ – avana http://solumedrol.top/ – medrol

    Wednesday, July 20, 2016 at 11:12 pm #
  10. asfus4eq62l wrote::

    mobic clindamycin gel topical where can i buy erythromycin motrin

    Friday, July 22, 2016 at 12:17 pm #
  11. asfusxeoe2v wrote::

    methotrexate ectopic diuretic furosemide proscar online atenolol 100 mg view website

    Tuesday, July 26, 2016 at 7:38 pm #
  12. asfus50xvh1 wrote::

    clomid iui metformin 500mg prevacid

    Thursday, July 28, 2016 at 11:55 pm #
  13. asfuslx2ux5 wrote::

    allopurinol metformin medication nexium buy tretinoin gel

    Friday, July 29, 2016 at 11:08 am #
  14. asfuscne3o2 wrote::

    viagra buy azithromycin metformin hydrochloride crestor savings

    Friday, August 5, 2016 at 11:58 am #
  15. asfusui48b2 wrote::

    medrol where to buy amoxicillin citalopram

    Saturday, August 6, 2016 at 7:51 am #
  16. asfusdik25v wrote::

    crestor medicine methotrexate drug atomoxetine buy tenormin xalatan

    Monday, August 22, 2016 at 9:00 am #
  17. asfuskscqbu wrote::

    benicar xeloda viagra pills for sale robaxin

    Tuesday, August 23, 2016 at 5:48 am #
  18. asfusajwxw9 wrote::

    where to buy viagra without a prescription propranolol rimonabant online lasix sildenafil

    Tuesday, August 23, 2016 at 1:11 pm #

Trackback/Pingback (1)

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

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