<?xml version="1.0" encoding="UTF-8" ?>
<rss version="2.0">
<channel>
<title><![CDATA[Snooda]]></title> 
<link>http://www.snooda.com/index</link> 
<description><![CDATA[Snooda's Blog]]></description> 
<language>zh-cn</language> 
<copyright><![CDATA[Snooda]]></copyright>
<item>
<link>http://www.snooda.com/read/</link>
<title><![CDATA[Blog今日更新：图片显示]]></title> 
<author>snooda &lt;admin@snooda.com&gt;</author>
<category><![CDATA[默认分类]]></category>
<pubDate>Sat, 29 May 2010 17:25:20 +0000</pubDate> 
<guid>http://www.snooda.com/read/</guid> 
<description>
<![CDATA[ 
	    最近几天在搞博客的图片显示，之前去面试的时候面试官就提出过“你的博客只是一些文字的东西，不能显示图片啊”。不能显示图片确实是个硬伤，是博客功能的一大缺失，今天终于搞完了。顺利实现了图片显示功能。<br />
<br />
<br />
    首先就是考虑图片的存储位置和在表示方式。<br />
<br />
    某些博客程序把图片放到mysql里，这确实很方便，易于管理。但是效率实在不敢恭维，数据库服务器本来就是系统瓶颈，还把图片都扔进去，无疑加大了数据库服务器的负载。并且也不利于分开部署，所以我决定把图片以文件的格式存放。<br />
<br />
    然后需要考虑图片在文章中的表示方式。最后展示给用户的时候肯定是html了，但是存储到数据库的时候假如存储成html标签的话既不安全，也对兼容性有影响。所以决定使用UBBCode方法，用“[”代替“&lt;”，在显示时再转换。转换过程很简单，正则表达式即可。<br />
<br />
    这时又出现了一个问题，就是在首页显示的时候，由于要截取文章的前端部分显示，很有可能将img标签截断，这样影响显示。想了好几天，今天终于找到了一个比较好的方法：先用preg_split把文章按“img标签对”作为分隔符分开，这样其他文字就被分成了几大段，通过判断这些段落的起始位置和结束位置可以很简单的判断是否有“img标签对”跨越分界线。若有，则把分界线左移即可。<br />
<br />
     实践中还发现另外两个问题，一是正则匹配贪婪性问题，若不配置成非贪婪，那么在有多张图片的时候，会匹配第一个img开始标签和最后一个img结束标签。会导致问题，所以要加上问号设置为非贪婪匹配。问题二是img标签对不成对的问题，有可能文章中为了说明[img]而写了一个，这样的话匹配时会从该[img]开始匹配，直到遇到一个【/img】为止，显然会破坏文章，所以匹配img标签对时正则表达式应写成“以[img]开始，中间是非[img]的任意值，以【/img】结束”，这样可以保证匹配的图片url是正确的。<br />
<br />
    <br />
<br />
     作为一个网站，首页速度非常重要，假如打开首页的时候加载了一大堆巨大的图片，会严重浪费带宽，也会因为页面打开过慢而造成不好的用户体验，所以我决定在首页显示缩略图，在正文中显示原图。这样就遇到了一个问题，就是在用户上传图片的时候可以自动生成缩略图。由于图片处理是比较耗费资源的，所以我决定使用C语言来做这件事。<br />
<br />
     OpenCV是一个很好用的图形库，很容易就做了个生成缩略图的小程序出来。在用户上传图片后自动调用该程序生成一个缩略图。不过每次生成缩略图都会调用该程序。进程创建和切换的开销太大，稍后会改装成服务来运行。<br />
<br />
<br />
     由于首页上显示缩略图，所以url和正文的不同，需要做相应修改，这里使用了preg_replace_callback，自己写了回调函数，将url进行相应的转化。<br />
<br />
<br />
     至此，图片功能就实现了。下一步要做的就是优化功能，在显示大图时像其他网站一样，先下载缩略图显示一个模糊的图像，再一点一点下载大图替换成清晰图像等功能。<br />
<br />
<br />
贴个图，呵呵：<br />
<a href="http://snooda.com/blogpic/normal/1275152174_test.jpg" target="_blank"><img src="http://snooda.com/blogpic/normal/1275152174_test.jpg" class="insertimage" alt="点击在新窗口中浏览此图片" title="点击在新窗口中浏览此图片" border="0"/></a>
]]>
</description>
</item><item>
<link>http://www.snooda.com/read/#blogcomment</link>
<title><![CDATA[[评论] Blog今日更新：图片显示]]></title> 
<author> &lt;user@domain.com&gt;</author>
<category><![CDATA[评论]]></category>
<pubDate>Thu, 01 Jan 1970 00:00:00 +0000</pubDate> 
<guid>http://www.snooda.com/read/#blogcomment</guid> 
<description>
<![CDATA[ 
	
]]>
</description>
</item>
</channel>
</rss>