使用cssbox将html文件转为图片文件

简介: 使用cssbox将html文件转为图片文件


在我的另一篇博客 使用freemarker动态填充html并可转为图片中,大家已经了解到如何使用freemarker动态填充html文件了,那么如何将html文件转为图片文件呢?

1. 引入依赖

<dependency>
    <groupId>net.sf.cssbox</groupId>
    <artifactId>cssbox</artifactId>
    <version>4.14</version>
</dependency>


2. 编写Util类

public class Html2ImageUtil {
  public static void transferHtml2Image(String htmlFilePath, String imageFilePath, Integer width, Integer height) {
    ImageRenderer render = new ImageRenderer();
    render.setWindowSize(new Dimension(width, height), false);
    String url = new File(htmlFilePath).toURI().toString();
    try {
      FileOutputStream out = new FileOutputStream(imageFilePath);
      render.renderURL(url, out, ImageRenderer.Type.PNG);
    } catch (Exception e) {
      e.printStackTrace();
    }
  }
}


3. 调用Util

Html2ImageUtil.transferHtml2Image("result.html", "result.png", WIDTH_IMAGE, HEIGHT_IMAGE);


然后就可在项目根目录下找到生成的名为"result.png"的图片文件啦。

4. 存在的问题

对于外部引用的js不支持;虽然存在不完美的地方,但仍然不失为一个好用的html转图片的工具哦~

5. 改进

如果大家觉得效果不够好,可以尝试使用cssbox的5.0.0版本,详见我的另一篇博客:使用5.0.0版本的cssbox将html文件转为图片文件,并解决字体显示问题

目录
相关文章
|
3月前
|
前端开发 JavaScript 容器
制作b超单生成器, 假怀孕b超单图片制作, p图医院证明【css+html+js装逼恶搞神器】
本资源提供一个适合用于熟人之间恶搞的工具,效果逼真,仅供学习参考与娱乐。包含前端技术学习要点:语义化布局、响应式设计、Flexbox、图片自适应
|
8月前
|
移动开发 JavaScript 前端开发
【Html.js——图片折叠效果】折叠手风琴(蓝桥杯真题-1763)【合集】
本项目实现了一个图片折叠手风琴效果,使用jQuery完成。主要包括以下部分: - **介绍**:任务是通过点击图片实现折叠和展开的效果。 - **准备**:内置初始代码,包含 `css/style.css`、`images/` 文件夹、`js/` 文件夹及 `index.html` 等文件。启动 Web Server 服务可运行项目。 - **目标**:完善 `index.js` 文件,使页面达到预期的折叠效果。 - **规定**:严格按步骤操作,保持默认文件结构不变,并在完成后保持 Web 服务正常访问状态。 - **通关代码**:使用 jQuery 实现点击事件,为选中元素添加 `act
120 19
|
10月前
利用html2canvas插件自定义生成名片信息并保存图片
这是一个利用html2canvas插件自定义生成名片信息并保存图片,自定义上传头像,自定义输入个人信息内容,自定义图片名称,并将生成的图片保存到本地
153 1
利用html2canvas插件自定义生成名片信息并保存图片
|
11月前
|
Web App开发 前端开发 搜索推荐
创建HTML文件
【10月更文挑战第14天】创建HTML文件
305 4
|
11月前
HTML图片
【10月更文挑战第4天】HTML图片。
92 2
|
11月前
|
JSON 数据格式
LangChain-20 Document Loader 文件加载 加载MD DOCX EXCEL PPT PDF HTML JSON 等多种文件格式 后续可通过FAISS向量化 增强检索
LangChain-20 Document Loader 文件加载 加载MD DOCX EXCEL PPT PDF HTML JSON 等多种文件格式 后续可通过FAISS向量化 增强检索
805 2
在线将多张图片拼接起来图工具HTML源码
在线将多张图片拼接成一张图片,多图合一并导出下载。无需本地安装软件。 下载时,使用日期时间作为文件名,规避图片文件名相同造成的覆盖问题;也能省去一部覆盖确认操作 多语言支持
169 0
在线将多张图片拼接起来图工具HTML源码
|
前端开发
Twaver-HTML5基础学习(37)network导出图片并下载
本文介绍了如何在Twaver-HTML5中将network导出为图片并提供下载,主要通过将network转换为canvas对象,然后转换为base64编码的图片进行展示和下载。
109 5
|
前端开发 Windows
【前端web入门第一天】02 HTML图片标签 超链接标签 音频标签 视频标签
本文档详细介绍了HTML中的图片、超链接、音频和视频标签的使用方法。首先讲解了`&lt;img&gt;`标签的基本用法及其属性,包括如何使用相对路径和绝对路径。接着介绍了`&lt;a&gt;`标签,用于创建超链接,并展示了如何设置目标页面打开方式。最后,文档还涵盖了如何在网页中嵌入音频和视频文件,包括简化写法及常用属性。
241 13
|
11月前
|
JavaScript 前端开发 容器
Vue生成PDF文件攻略:html2canvas与jspdf联手,中文乱码与自动换行难题攻克
Vue生成PDF文件攻略:html2canvas与jspdf联手,中文乱码与自动换行难题攻克
1358 0