项目场景：

项目场景：后台将html文件转换成图片资源。项目是老师布置作业给学生做，作业试题对接的是第三方题库的接口，但它们都采用题干为HTML格式，而我们传统的试题格式都是图片格式，则需要调用第三方题库后，将每个试题的题干富文本存入到HTML文件中，并引用第三方题库的富文本css样式适配题干原有的展示样式，最后拿整个HTML文件去转对应试题的图片。

实现描述

提示：这里描述可以实现转换的技术

我对接了其中三种技术：html2image、cssbox和第三方工具wkhtmltox。
做个总结：
html2images：实现起来非常简单，只需要引用html2image的pom依赖，实现其核心类HtmlImageGenerator的loadHtml()方法，就可以实现转换。优：实现简单，易用；缺：a.如果html代码里带有图片时，生成的程序必须有一定的等待时间（Thread.sleep(xx)），等待时间需要根据实际图片大小去设置（初步估计是工具加载流未完成就进行图片的生成以及保存工作）b.画布背景颜色变红，可重新设置画布背景颜色。 c.对Css3样式支持很差（width标签设置都不生效），复杂页面不友好。
个人评价：技术门槛低，十分简单html页面转换时使用。

cssbox：实现起来也比较简单，引用cssbox的pom依赖，将html代码文本创建一个cssbox文档资源DocumentSource，再通过cssbox的DOMSource对其文档解析并通过cssbox的DOMAnalyzer创建CSS解析器设置样式属性，最后通过创建BrowserCanvas浏览器画布设置其宽高尺寸得到图像。相比于html2images，cssbox解决了html代码里有图片时的问题和画布背景颜色变红问题，但还是对Css3样式支持不是太理想（width标签设置还是不生效），仅支持它内部实现的CSS解析器。
个人评价：通过画布的原理来实现的，未最终采用它的原因是width标签设置不生效。

wkhtmltox：通过第三方工具包来实现转换，不需要知道如何实现，只需要知道如何安装。解决了我上述所提到的几个问题abc，但安装麻烦。（window上安装及其简单；Linux物理机上直接跑项目的时候安装也不复杂，但Linux用docker安装wkhtmltox并给docker部署SpringBoot项目的容器中调用wkhtmltox容器转换工具时，部署比较复杂）

解决方案：

1、Linux用docker安装wkhtmltox并给docker部署SpringBoot项目的容器中调用wkhtmltox容器转换工具
参考文章：https://blog.csdn.net/weixin_42838675/article/details/116023685

拉取wkhtmltopdf镜像：

 docker pull dicoming/wkhtmltopdf-ws:latest

运行镜像
```
docker run -d \ -v /tmp/wkhtmltopdf:/tmp/wkhtmltopdf \ -v /usr/share/fonts:/usr/share/fonts \ -p 10080:80 \--name="wkhtmltopdf" \dicoming/wkhtmltopdf-ws
```
说明：
- -v /tmp/wkhtmltopdf:/tmp/wkhtmltopdf：wkhtmltox工具的tmp数据，同SpringBoot项目的转换引用wkhtmltopdf模块做了映射关系（比如是business模块），相当于两个docker容器共用/tmp/wkhtmltopdf目录。
```
   docker run -d --name business_module \ -v /tmp/wkhtmltopdf:/tmp/wkhtmltopdf \ -v /usr/share/fonts:/usr/share/fonts--restart=always e0653adf3185
```
- -v /usr/share/fonts:/usr/share/fonts：wkhtmltox工具需要的字体同物理机做映射关系（可以根据转换的html文件中具体引用的字体。linux安装字体参考文章）
- -p 10080:80 ：wkhtmltox的docker容器80映射10080（10080需要开端口）
- wkhtmltox的Http请求方式如下：

提示：下面代码示例中仅包含html2image、cssbox和第三方工具wkhtmltox。

源码点击这里，这是小编的个人笔记，喜欢的给小编给个赞！！

Springboot后台HTML/富文本转图片相关推荐

小程序展示后台编辑好的富文本[文字图片视频等]
小程序在开发的过程中都会遇到小程序官方给了富文本编辑器editor组件,但是只能在小程序端编辑,然后保存到后台的数据库中,但是一般都是网站后台编辑好,然后在小程序端展示后台编辑好的富文本信息.这样就可 ...
python自动发邮件富文本_django 实现后台从富文本提取纯文本
前言: 很多时候我们都会用富文本,比如说在版权区.博客文章编辑时等等.但是如果我们要做一个搜索的功能,去从富文本中查找关键字,就需要将富文本中的文本了.但是 django 并没有专门函数去做.这个时候 ...
springBoot+itext处理富文本转pdf
springBoot+itext处理富文本转pdf pom文件引入依赖 html转PDF方法处理不换行创建包新增Breaker.java类 pom文件引入依赖 <!-- itext5 st ...
功能需要富文本编译器图片不转base64，琢磨了一下，上代码
editor = new E('#div1');// 编辑器高度editor.config.height = 300;// 图片转base64(开这个是因为关闭,是因为文件上传窗口也会关闭)edito ...
vue+element-ui实现富文本(含有图片粘贴拖拽上传)
vue+element-ui实现富文本(含有图片粘贴拖拽上传) Just For Share | 仅仅分享首先需要安装 cnpm i vue-quill-editor -D 富文本编辑器 cnpm ...
富文本内图片大小调整，判断有无图片，限制图片大小
//限制富文本内图片大小,有无图片,限制图片大小const theEle = this.$refs.text; //获取到元素console.log(theEle.value);//获取到富文本内容v ...
微信小程序：rich-text 富文本中图片自适应
/*** 处理富文本里的图片宽度自适应* 1.去掉img标签里的style.width.height属性* 2.img标签添加style属性:max-width:100%;height:auto* 3 ...
uniapp的uParse富文本改图片大小
uniapp的uParse富文本改图片大小解决方法 <u-parse class="content" :content=& ...
解决富文本中图片过大的问题
富文本中图片如果不进行设置,就会出现下面这种现象. 解决方式: 创建生命周期函数:(注意修改其中的类名) updated(){let DomList=document.getElementsByCla ...

Springboot后台HTML/富文本转图片

项目场景：

实现描述

解决方案：

Springboot后台HTML/富文本转图片相关推荐

最新文章

热门文章