如何在Linux上将HTML页面转化成png图片

简介:

将一个特定页面抓取为一张png图片的最简单的方法是使用CutyCapt,这是一种在Linux下的方便地将HTML网页转化成矢量图形和位图图像格式的命令行工具(比如,SVG, PDF, PS, PNG, JPEG, TIFF, GIF)。CutyCapt内部使用WebKit渲染引擎来导出网页渲染输出到图片文件中。它使用Qt构建,CutyCapt实际上是一个也可以在Windows上使用的跨平台应用。(译注:也有一个基于IE内核的 IECapt 可以作此用途)

在本篇教程中,我会描述如何将一个HTML网页使用CutyCapt转化成png图片

在Linux上安装 CutyCapt

这是在特定Linux发行版上的安装命令。

在Debian, Ubuntu 或者 Linux Mint 安装 CutyCapt

 
 
  1. $ sudo apt-get install cutycapt

在Fedora上安装 CutyCapt

 
 
  1. $ sudo yum install subversion qt-devel qtwebkit-devel gcc-c++ make
  2. $ svn co svn://svn.code.sf.net/p/cutycapt/code/ cutycapt
  3. $ cd cutycapt/CutyCapt

在Fedora上编译前,你需要在源码上打上补丁

使用文本编辑器打开CutyCapt.hpp,并且加入在文件的开头加上下面的两行。

 
 
  1. #include
  2. #include

最后,如下编译并安装CutyCapt。

 
 
  1. $ qmake-qt4
  2. $ make
  3. $ sudo cp CutyCapt /usr/local/bin/cutycapt

在CentOS 或者 RHEL安装 CutyCapt

首先在你的Linux上启用EPEL仓库。接着和在Fedora上一样使用相同的步骤编译安装。

使用CutyCapt将 HTML 转化成 PNG

将一个HTML页面截图成一个png图片,只要使用下面的格式运行CutyCapt。

 
 
  1. $ cutycapt --url=http://www.cnn.com --out=cnn.png

要将HTML页面保存成不同的格式(比如,PDF),只要适当地指定输出文件。

 
 
  1. $ cutycapt --url=http://www.cnn.com --out=cnn.pdf

下图显示了CutyCapt命令选项。

在一台不含X的服务器上使用CutyCapt将HTML转换成PNG

虽然CutyCapt是一个命令行工具,但是它需要X服务运行。如果你尝试在不含X服务的机器上运行,你会得到下面这个错误:

 
 
  1. cutycapt: cannot connect to X server :0

如果你要不含X的服务器上运行CutyCapt,你可以在服务器上安装Xvfb(轻量级“假的”X11 服务)。这样CutyCapt就不会报错了。

要在Debian, Ubuntu 或者 Linux Mint 上安装Xvfb:

 
 
  1. $ sudo apt-get install xvfb

要在Fedora, CentOS 或者 RHEL 上安装Xvfb:

 
 
  1. $ sudo yum install xvfb

在安装Xvfb之后,接下来像这样运行CutyCapt。

 
 
  1. $ xvfb-run --server-args="-screen 0, 1280x1200x24" cutycapt --url=http://www.cnn.com --out=cnn.png

它首先会运行Xbfb服务,接着使用CutyCapt来抓取网页。因此它可能会花费更长的时间。如果你想要截图多张截图,你可能事先需要将Xvfb作为后台守护进程启动。

原文发布时间为:2014-03-18

本文来自云栖社区合作伙伴“Linux中国”

目录
打赏
0
0
0
0
325
分享
相关文章
|
3月前
超好看的404提示页面HTML源码
超好看的404提示页面HTML源码
287 77
|
2月前
|
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
63 1
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
164 21
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
78 14
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
|
3月前
css3 svg制作404页面动画效果HTML源码
css3 svg制作404页面动画效果HTML源码
76 34
【Html.js——图片折叠效果】折叠手风琴(蓝桥杯真题-1763)【合集】
本项目实现了一个图片折叠手风琴效果,使用jQuery完成。主要包括以下部分: - **介绍**:任务是通过点击图片实现折叠和展开的效果。 - **准备**:内置初始代码,包含 `css/style.css`、`images/` 文件夹、`js/` 文件夹及 `index.html` 等文件。启动 Web Server 服务可运行项目。 - **目标**:完善 `index.js` 文件,使页面达到预期的折叠效果。 - **规定**:严格按步骤操作,保持默认文件结构不变,并在完成后保持 Web 服务正常访问状态。 - **通关代码**:使用 jQuery 实现点击事件,为选中元素添加 `act
57 19
|
5月前
利用html2canvas插件自定义生成名片信息并保存图片
这是一个利用html2canvas插件自定义生成名片信息并保存图片,自定义上传头像,自定义输入个人信息内容,自定义图片名称,并将生成的图片保存到本地
97 1
利用html2canvas插件自定义生成名片信息并保存图片
如何利用HTML和CSS构建企业级网站的全过程。从项目概述到页面结构设计,再到HTML结构搭建与CSS样式设计,最后实现具体页面并进行优化提升,全面覆盖了网站开发的关键步骤
本文深入介绍了如何利用HTML和CSS构建企业级网站的全过程。从项目概述到页面结构设计,再到HTML结构搭建与CSS样式设计,最后实现具体页面并进行优化提升,全面覆盖了网站开发的关键步骤。通过实例展示了主页、关于我们、产品展示、新闻动态及联系我们等页面的设计与实现,强调了合理布局、美观设计及用户体验的重要性。旨在为企业打造一个既专业又具吸引力的线上平台。
169 7
|
5月前
html页面点击按钮实现页面跳转功能
html页面点击按钮实现页面跳转
149 11
SpringBoot项目的html页面使用axios进行get post请求
SpringBoot项目的html页面使用axios进行get post请求
100 2