网页截图API接口,一键自动生成网页截图
2017-09-22 02:15
417 查看
[b]背景[/b]
最近在开发一个小程序,其中有一个帮助模块,内容为帮助文章列表,文章内容为网站后台编辑的富文本格式。鉴于小程序的特殊性,其对html格式的富文本支持并不友好。
刚开始有人开发了wxparse插件,后来微信提供了rich-text组件,但是这两者存在一些问题。
[b]思路[/b]
后台编辑的文章样式经过wxparse或者richtext组件显示后,都存在一些兼容性问题。如果我们将文章内容做成图片,然后用image来下显示应该可以达到比较理想的效果。
但是没一篇文章都找美工区设计一张图片费时费力,修改还费劲。
如果我们后台编辑的文章能自动生成一个图片就完美了。
[b]方案[/b]
查询后发现国外网站thumb.io提供了类似的服务,可以利用API接口将指定地址保存为图片。但是经过测试发现图片并不清晰,而且访问速度非常慢。然后我就自己安装了phantomjs并进行了测试,效果比较理想。
用phantomjs保存的百度首页截图
为了实现自动化,我还做成了web api。通过将对应文章的网址发送到指定的api就可以自动生成截图(异步方式)。具体方法就是有截图请求的时候,将请求保存到数据库,然后服务器上跑一个程序挨个执行截图操作,截图后修改对应请求的状态。
----------------------------------------------------
API接口({}中的内容为参数值)
使用方法:将需要截图的网址传递到通过生成截图请求接口,一段时间(建议10秒)后再通过查询接口查询,如果返回的code=0,status=1的时候,直接将thumb保存到本地即可。
生成截图请求:http://thumb.loxn.cn/?url={URL}
说明:URL参数必须进行urlencode,否则可能出错
实例:http://thumb.loxn.cn/?url=http%3a%2f%2fwww.cnblogs.com%2fdragondean%2f
返回: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时存在
查询任务状态:http://thumb.loxn.cn/?a=query&task_id={TASK_ID}&key={KEY}
说明:task_id和key都是生成请求时返回,必填
实例:http://thumb.loxn.cn/?a=query&task_id=1&key=eb8578633e5cb22377ee85641204494f
返回:JSON
code 返回状态,0成功,3 任务不存在,4 查询秘钥错误
status code为0时,status=-1表示失败,status=0表示处理中,status=1表示已完成
thumb code位0且status为1时,截图地址,可直接将此图片下载到本地
err_msg 错误信息,仅status=-1时存在
----------------------------------------------------
接口暂时为测试状态,随时可能发生变化或者变更,届时将在此文章更新,请及时关注。也可以加入QQ群563752274获得最新的进展。
最近在开发一个小程序,其中有一个帮助模块,内容为帮助文章列表,文章内容为网站后台编辑的富文本格式。鉴于小程序的特殊性,其对html格式的富文本支持并不友好。
刚开始有人开发了wxparse插件,后来微信提供了rich-text组件,但是这两者存在一些问题。
[b]思路[/b]
后台编辑的文章样式经过wxparse或者richtext组件显示后,都存在一些兼容性问题。如果我们将文章内容做成图片,然后用image来下显示应该可以达到比较理想的效果。
但是没一篇文章都找美工区设计一张图片费时费力,修改还费劲。
如果我们后台编辑的文章能自动生成一个图片就完美了。
[b]方案[/b]
查询后发现国外网站thumb.io提供了类似的服务,可以利用API接口将指定地址保存为图片。但是经过测试发现图片并不清晰,而且访问速度非常慢。然后我就自己安装了phantomjs并进行了测试,效果比较理想。
用phantomjs保存的百度首页截图
为了实现自动化,我还做成了web api。通过将对应文章的网址发送到指定的api就可以自动生成截图(异步方式)。具体方法就是有截图请求的时候,将请求保存到数据库,然后服务器上跑一个程序挨个执行截图操作,截图后修改对应请求的状态。
----------------------------------------------------
API接口({}中的内容为参数值)
使用方法:将需要截图的网址传递到通过生成截图请求接口,一段时间(建议10秒)后再通过查询接口查询,如果返回的code=0,status=1的时候,直接将thumb保存到本地即可。
生成截图请求:http://thumb.loxn.cn/?url={URL}
说明:URL参数必须进行urlencode,否则可能出错
实例:http://thumb.loxn.cn/?url=http%3a%2f%2fwww.cnblogs.com%2fdragondean%2f
返回: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时存在
查询任务状态:http://thumb.loxn.cn/?a=query&task_id={TASK_ID}&key={KEY}
说明:task_id和key都是生成请求时返回,必填
实例:http://thumb.loxn.cn/?a=query&task_id=1&key=eb8578633e5cb22377ee85641204494f
返回:JSON
code 返回状态,0成功,3 任务不存在,4 查询秘钥错误
status code为0时,status=-1表示失败,status=0表示处理中,status=1表示已完成
thumb code位0且status为1时,截图地址,可直接将此图片下载到本地
err_msg 错误信息,仅status=-1时存在
----------------------------------------------------
接口暂时为测试状态,随时可能发生变化或者变更,届时将在此文章更新,请及时关注。也可以加入QQ群563752274获得最新的进展。
相关文章推荐
- 总结:自动生成网页截图(Screenshot)方法
- JavaScript中功能自动生成网页元素且可以增删改克隆(按钮,文本等)
- python之自动生成table网页(行列可指定)
- 自动生成静态网页(IO类)
- PHP CutyCapt生成网页url截图
- 定时自动打开网页并截图
- 一键静态化【一键生成静态网页】
- web平台动态页面自动生成静态网页中包含的外部页面的四种办法
- swagger和springmvc结合自动生成api接口文档
- itms-services协议:跳转网页部署及PHP动态生成 iOS渠道包IPA一键安装之plist
- 自动将目录下所有文件生成超链接网页
- Win8/Win8.1屏幕截图功能如何一键归零或自动保存至桌面
- 根据网页文件夹结构自动生成CHM帮助文件
- Python 实现网页自动截图的示例讲解
- js通过html2canvas,jspdf,canvg来对网页进行截图生成pdf
- HtmlUnit爬取Ajax动态生成的网页以及自动调用页面javascript函数
- 利用webkit生成网页截图 1
- Spring MVC学习总结(9)——Spring MVC整合swagger自动生成api接口文档
- 视频上传过程中自动转换为flv格式并截图生成缩略图
- ASP.NET中自动生成XML文件并通过XSLT显示在网页中的方法