用网页截图API接口自动生成网页截图

云文章

背景

最近在开发一个小程序，其中有一个帮助模块，内容为帮助文章列表，文章内容为网站后台编辑的富文本格式。鉴于小程序的特殊性，其对html格式的富文本支持并不友好。

刚开始有人开发了wxparse插件，后来微信提供了rich-text组件，但是这两者存在一些问题。

思路

后台编辑的文章样式经过wxparse或者richtext组件显示后，都存在一些兼容性问题。如果我们将文章内容做成图片，然后用image来下显示应该可以达到比较理想的效果。

但是没一篇文章都找美工区设计一张图片费时费力，修改还费劲。

如果我们后台编辑的文章能自动生成一个图片就完美了。

方案

查询后发现国外网站thumb.io提供了类似的服务，可以利用API接口将指定地址保存为图片。但是经过测试发现图片并不清晰,而且访问速度非常慢。然后我就自己安装了phantomjs并进行了测试，效果比较理想。

用phantomjs保存的百度首页截图

为了实现自动化，我还做成了web api。通过将对应文章的网址发送到指定的api就可以自动生成截图（异步方式）。具体方法就是有截图请求的时候，将请求保存到数据库，然后服务器上跑一个程序挨个执行截图操作，截图后修改对应请求的状态。

----------------------------------------------------

API接口（{}中的内容为参数值）

使用方法：将需要截图的网址传递到通过生成截图请求接口，一段时间(建议10秒)后再通过查询接口查询，如果返回的code=0,status=1的时候，直接将thumb保存到本地即可。

生成截图请求：{URL}

　　　　　　说明：URL参数必须进行urlencode，否则可能出错

　　　　　　实例：

　　　　　　返回：JSON格式

　　　　　　　　　code 　　　0 成功，1 网址格式错误， 2 网址已存在

　　　　　　　　　msg　　　 错误信息（仅code不为0是存在）

　　　　　　　　　task_id　　 任务ID，查询状态时需要用到（code为0或者2时）

　　　　　　　　　key　　　　查询秘钥，查询状态时需要用到（code为0或者2时）

　　　　　　　　　status　　 任务状态，如果任务已存在则会返回此状态，-1表示失败，0表示处理中，1表示已完成

　　　　　　　　　thumb　　 截图地址，可直接将此图片下载到本地　（code为2且status为1时）

　　　　　　　　 err_msg　　　错误信息，仅status=-1时存在

查询任务状态：{TASK_ID}&key={KEY}

　　　　　　说明：task_id和key都是生成请求时返回，必填

　　　　　　实例：

　　　　　　返回：JSON

　　　　　　　　code　　　　返回状态，0成功，3 任务不存在，4 查询秘钥错误

　　　　　　　　status　　　 code为0时，status=-1表示失败，status=0表示处理中，status=1表示已完成

　　　　　　　　thumb　　　code位0且status为1时，截图地址，可直接将此图片下载到本地

　　　　　　　　err_msg　　　错误信息，仅status=-1时存在

----------------------------------------------------

Mr.Trouble

源码网站开发