Snooda

最近几天在搞博客的图片显示，之前去面试的时候面试官就提出过“你的博客只是一些文字的东西，不能显示图片啊”。不能显示图片确实是个硬伤，是博客功能的一大缺失，今天终于搞完了。顺利实现了图片显示功能。


首先就是考虑图片的存储位置和在表示方式。

某些博客程序把图片放到mysql里，这确实很方便，易于管理。但是效率实在不敢恭维，数据库服务器本来就是系统瓶颈，还把图片都扔进去，无疑加大了数据库服务器的负载。并且也不利于分开部署，所以我决定把图片以文件的格式存放。

然后需要考虑图片在文章中的表示方式。最后展示给用户的时候肯定是html了，但是存储到数据库的时候假如存储成html标签的话既不安全，也对兼容性有影响。所以决定使用UBBCode方法，用“[”代替“<”，在显示时再转换。转换过程很简单，正则表达式即可。

这时又出现了一个问题，就是在首页显示的时候，由于要截取文章的前端部分显示，很有可能将img标签截断，这样影响显示。想了好几天，今天终于找到了一个比较好的方法：先用preg_split把文章按“img标签对”作为分隔符分开，这样其他文字就被分成了几大段，通过判断这些段落的起始位置和结束位置可以很简单的判断是否有“img标签对”跨越分界线。若有，则把分界线左移即可。

实践中还发现另外两个问题，一是正则匹配贪婪性问题，若不配置成非贪婪，那么在有多张图片的时候，会匹配第一个img开始标签和最后一个img结束标签。会导致问题，所以要加上问号设置为非贪婪匹配。问题二是img标签对不成对的问题，有可能文章中为了说明[img]而写了一个，这样的话匹配时会从该[img]开始匹配，直到遇到一个【/img】为止，显然会破坏文章，所以匹配img标签对时正则表达式应写成“以[img]开始，中间是非[img]的任意值，以【/img】结束”，这样可以保证匹配的图片url是正确的。



作为一个网站，首页速度非常重要，假如打开首页的时候加载了一大堆巨大的图片，会严重浪费带宽，也会因为页面打开过慢而造成不好的用户体验，所以我决定在首页显示缩略图，在正文中显示原图。这样就遇到了一个问题，就是在用户上传图片的时候可以自动生成缩略图。由于图片处理是比较耗费资源的，所以我决定使用C语言来做这件事。

OpenCV是一个很好用的图形库，很容易就做了个生成缩略图的小程序出来。在用户上传图片后自动调用该程序生成一个缩略图。不过每次生成缩略图都会调用该程序。进程创建和切换的开销太大，稍后会改装成服务来运行。


由于首页上显示缩略图，所以url和正文的不同，需要做相应修改，这里使用了preg_replace_callback，自己写了回调函数，将url进行相应的转化。


至此，图片功能就实现了。下一步要做的就是优化功能，在显示大图时像其他网站一样，先下载缩略图显示一个模糊的图像，再一点一点下载大图替换成清晰图像等功能。


贴个图，呵呵：