项目有一个需求：需要给数据转化为图片供用户查看方便保存和分享传播，并且数据很多且数据是实时变化的，但是数据变动的频率不高，大约日更新一次，所以图片不可能提前生成，因为有几万张，而且数据是日更新的，所以最好是实时生成imgBase64共给前端展示
方案1：前端进行调接口并渲染页面后给页面生成一张图片
优势：不用接口做任何支持，提供了接口数据就行
劣势：前端是小程序，需要给页面换成h5，在渲染完页面转换为图片的时候有延迟，用户体感不好，并且需要页面完整展示数据并能带有滚动条，否则生成的图片数据缺失
所以想其它方案
方案2：接口生成图片给前端提供图片地址或者base64字符串并做缓存，前端直接用于展示即可
优势：前端只管拿到图片数据展示，无延迟，用户体感好
劣势：项目没有相关实现，需要去探索
刚开始用了excel设置模板然后填充数据转换为图片，用了一个第三方的插件给excel转换为图片后上面带有第三方的警告水印，需要money去处理这个水印，破解的话需要学c在底层破解，第三方底层代码乱码防破解，故这条路不通，后面发现了ftl模板填充数据转换为html然后转成img或者imgBase64都可以，原理和excel模板填充数据一样，但是ftl是springboot支持的，所以用ftl尝试后成功，下面贴出代码记录
第一步需要的依赖
<!-- ftl模板依赖 -->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-freemarker</artifactId>
<version>2.2.9.RELEASE</version>
</dependency>
<!-- html转图片 -->
<dependency>
<groupId>org.xhtmlrenderer</groupId>
<artifactId>flying-saucer-core</artifactId>
<version>9.1.22</version>
</dependency>
第二步建一个ftl模板
ftl其实就是html，但是填充数据相关的标签需要特定的标签，有其他需求的可以百度ftl标签用法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="text/html;charset=UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
font-size: 14px;
font-family: SimSun;
}
.grade {
height: 70px;
background: #ccc;
padding: 10px;
width: 85px;
}
.grade span {
display: block;
}
.left-info div {
line-height: 50px;
}
</style>
</head>
<body>
<div class="image-box">
<div class="header">
班级：${name}
</div>
<div class="main-content" style="font-size: 12px;">
<table border="0">
<tbody>
<#list mapList as t>
<tr style="margin-bottom: 2px;">
<td>
<div class="grade">
<span style="font-weight: bold; font-size: 18px;">${t.name}</span>
<span>${t.age}</span>
<span>${t.sex}</span>
</div>
</td>
</tr>
</#list>
</tbody>
</table>
</div>
</div>
</body>
</html>
第三步创建一个工具类
可以看到在html2ImgBase64方法中有一部分代码是我给图片存在本地目录中，返回的是imgbase64，这个看个人需求看是需要图片还是base64自行处理
package com.nuoyi.ftl.util;
import freemarker.template.Configuration;
import freemarker.template.Template;
import lombok.extern.slf4j.Slf4j;
import org.w3c.dom.Document;
import org.xhtmlrenderer.layout.SharedContext;
import org.xhtmlrenderer.swing.Java2DRenderer;
import javax.imageio.ImageIO;
import javax.xml.parsers.DocumentBuilder;
import javax.xml.parsers.DocumentBuilderFactory;
import java.awt.*;
import java.awt.image.BufferedImage;
import java.io.*;
import java.util.Base64;
import java.util.HashMap;
import java.util.Map;
/**
* @description 工具类
*/
@Slf4j
public class FreemarkerUtil {
private static Configuration config = null;
/**
* 初始化获取html模板
*/
static {
config = new Configuration(Configuration.VERSION_2_3_20);
config.setDefaultEncoding("UTF-8");
try {
config.setClassForTemplateLoading(FreemarkerUtil.class, "/templates");
} catch (Exception e) {
e.printStackTrace();
log.error(e.toString());
}
}
/**
* 把BufferedImage 图片转base64
*
* @param bufferedImage
* @return
* @throws Exception
*/
private static String bufferedImageToBase64(BufferedImage bufferedImage) throws Exception {
String png_base64;//转换成base64串
//io流
try (ByteArrayOutputStream baos = new ByteArrayOutputStream()) {
ImageIO.write(bufferedImage, "png", baos);//写入流中
byte[] bytes = baos.toByteArray();//转换成字节
png_base64 = Base64.getEncoder().encodeToString(bytes);
png_base64 = png_base64.replaceAll("\n", "").replaceAll("\r", "");//删除 \r\n
}
return "data:image/jpg;base64," + png_base64;
}
/**
* 将html转成base64字节
*
* @param html
* @param width
* @param height
* @return
* @throws Exception
*/
public static String html2ImgBase64(String html, int width, int height) throws Exception {
byte[] bytes = html.getBytes();
BufferedImage img;
try (ByteArrayInputStream bin = new ByteArrayInputStream(bytes)) {
DocumentBuilderFactory factory = DocumentBuilderFactory.newInstance();
DocumentBuilder builder = factory.newDocumentBuilder();
Document document = builder.parse(bin);
Java2DRenderer renderer = new Java2DRenderer(document, width, height);
SharedContext sharedContext = renderer.getSharedContext();
sharedContext.setDotsPerPixel(3);
sharedContext.setDPI(523);
img = renderer.getImage();
String imgName = Thread.currentThread().getContextClassLoader().getResource("").getPath() + "test.jpg";
System.out.println("输出地址：" + imgName);
ByteArrayOutputStream outputStream = new ByteArrayOutputStream();
ImageIO.write(img, "jpg", new FileOutputStream(imgName));
}
return bufferedImageToBase64(img);
}
/**
* 将html转成 图片
*
* @param html
* @param width
* @param height
* @return
* @throws Exception
*/
public static BufferedImage html2Img(String html, int width, int height) throws Exception {
byte[] bytes = html.getBytes();
BufferedImage img;
//转BufferedImage
try (ByteArrayInputStream bin = new ByteArrayInputStream(bytes)) {
DocumentBuilderFactory factory = DocumentBuilderFactory.newInstance();
DocumentBuilder builder = factory.newDocumentBuilder();
Document document = builder.parse(bin);
Java2DRenderer renderer = new Java2DRenderer(document, width, height);
SharedContext sharedContext = renderer.getSharedContext();
sharedContext.setDotsPerPixel(3);
sharedContext.setDPI(523);
//字体
Font simsun = getSIMSUN(Font.BOLD, 24);
sharedContext.setFontMapping("simsun", simsun);//这样设置字体无效
Map map = new HashMap<>();//设置参数
map.put(RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_ON);
map.put(RenderingHints.KEY_COLOR_RENDERING, RenderingHints.VALUE_COLOR_RENDER_QUALITY);
map.put(RenderingHints.KEY_DITHERING, RenderingHints.VALUE_DITHER_ENABLE);
map.put(RenderingHints.KEY_FRACTIONALMETRICS, RenderingHints.VALUE_FRACTIONALMETRICS_ON);
map.put(RenderingHints.KEY_INTERPOLATION, RenderingHints.VALUE_INTERPOLATION_BICUBIC);
map.put(RenderingHints.KEY_RENDERING, RenderingHints.VALUE_RENDER_QUALITY);
map.put(RenderingHints.KEY_TEXT_ANTIALIASING, RenderingHints.VALUE_TEXT_ANTIALIAS_ON);
map.put(RenderingHints.KEY_ALPHA_INTERPOLATION, RenderingHints.VALUE_ALPHA_INTERPOLATION_QUALITY);
map.put(RenderingHints.KEY_STROKE_CONTROL, RenderingHints.VALUE_STROKE_PURE);
renderer.setRenderingHints(map);
img = renderer.getImage();
}
return img;
}
/**
* 获取模板数据
*
* @param template
* @param params
* @return
* @throws Exception
*/
public static String generate(String template, Map params) throws Exception {
Template tp = config.getTemplate(template);
tp.setEncoding("UTF-8");
StringWriter stringWriter = new StringWriter();
String htmlStr;
try {
tp.process(params, stringWriter);
htmlStr = stringWriter.toString();
stringWriter.flush();
} finally {
stringWriter.close();
}
return htmlStr;
}
/**
* 宋体
*
* @param style Font.BOLD
* @param size 24
*/
public static Font getSIMSUN(int style, float size) {
Font font = null;
//获取字体流
InputStream simsunFontFile = FreemarkerUtil.class.getResourceAsStream("/fonts/simsun.ttc");
try {
//创建字体
font = Font.createFont(Font.PLAIN, simsunFontFile).deriveFont(style, size);
} catch (FontFormatException e) {
log.error("", e);
} catch (IOException e) {
font = new Font("宋体", Font.BOLD, 6);
log.error("", e);
}
return font;
}
}
第四步开始调用
我这里是写了个单元测试进行调试，在方法中我给图片的地址和base64都打印出来了
package com.nuoyi.ftl;
import cn.hutool.core.lang.hash.Hash;
import com.nuoyi.ftl.bean.User;
import com.nuoyi.ftl.util.FreemarkerUtil;
import lombok.extern.slf4j.Slf4j;
import org.junit.jupiter.api.Test;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.boot.test.context.SpringBootTest;
import javax.imageio.ImageIO;
import java.awt.image.BufferedImage;
import java.io.ByteArrayOutputStream;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
@SpringBootTest(classes = App.class)
@Slf4j
public class HtmlToImgTest {
@Test
public void ftiToHtmlToImg() throws Exception{
Map<String, Object> mp = new HashMap<>();
mp.put("name", "101班");
List<User> list = new ArrayList<>();
for (int i = 1; i < 4; i++) {
list.add(new User("我是"+i,i*3,"男"));
}
mp.put("mapList",list);
String html = FreemarkerUtil.generate("test.ftl", mp);
String s = FreemarkerUtil.html2ImgBase64(html, 1000, -1);
System.out.println(s);
}
}
生成图片：
图片的base64：
具体代码移步 https://download.csdn.net/download/qq_41973632/87895892
服务器中生成的图片字体乱码异常等已解决移步springboot通过ftl模板动态生成图片字体异常加载字体文件处理
扫一扫
1174
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
