如何在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中国”

相关文章
|
1月前
利用html2canvas插件自定义生成名片信息并保存图片
这是一个利用html2canvas插件自定义生成名片信息并保存图片,自定义上传头像,自定义输入个人信息内容,自定义图片名称,并将生成的图片保存到本地
37 1
利用html2canvas插件自定义生成名片信息并保存图片
|
26天前
html页面点击按钮实现页面跳转功能
html页面点击按钮实现页面跳转
50 11
|
1月前
|
JavaScript 前端开发 Java
SpringBoot项目的html页面使用axios进行get post请求
SpringBoot项目的html页面使用axios进行get post请求
47 2
|
19天前
|
JavaScript 前端开发 Java
SpringBoot项目的html页面使用axios进行get post请求
SpringBoot项目的html页面使用axios进行get post请求
34 0
|
2月前
HTML图片
【10月更文挑战第4天】HTML图片。
28 2
|
2月前
|
移动开发 前端开发 JavaScript
【HTML】HTML页面和常见标签
【HTML】HTML页面和常见标签
39 1
|
3月前
|
JavaScript 前端开发 Java
SpringBoot项目的html页面使用axios进行get post请求
SpringBoot项目的html页面使用axios进行get post请求
50 6
|
2月前
|
移动开发 HTML5
一个最简单的 HTML 页面结构如下:
HTML 是一种标记语言,用于描述网页结构。通过 `<html>`, `<head>`, `<body>` 等标签构建页面,支持文本、图像、链接、表格等多种元素。本文介绍了 HTML 基础,包括常用标签及创建简单网页的实例,帮助初学者快速入门。
68 0
|
3月前
|
前端开发
Twaver-HTML5基础学习(37)network导出图片并下载
本文介绍了如何在Twaver-HTML5中将network导出为图片并提供下载,主要通过将network转换为canvas对象,然后转换为base64编码的图片进行展示和下载。
40 5
|
3月前
|
前端开发 Windows
【前端web入门第一天】02 HTML图片标签 超链接标签 音频标签 视频标签
本文档详细介绍了HTML中的图片、超链接、音频和视频标签的使用方法。首先讲解了`<img>`标签的基本用法及其属性,包括如何使用相对路径和绝对路径。接着介绍了`<a>`标签,用于创建超链接,并展示了如何设置目标页面打开方式。最后,文档还涵盖了如何在网页中嵌入音频和视频文件,包括简化写法及常用属性。
54 13