Java uses Html2Image to convert html to pictures

Required jar The second jar is the tool class, which is used for date conversion, and the first is the package required by Html2Image

        <dependency>
            <groupId>gui.ava</groupId>
            <artifactId>html2image</artifactId>
            <version>0.9</version>
        </dependency>


        <dependency>
            <groupId>cn.hutool</groupId>
            <artifactId>hutool-all</artifactId>
            <version>5.0.6</version>
        </dependency>

Conversion code

HtmlImageGenerator imageGenerator = new HtmlImageGenerator();




			String htmlstr = "<table style=\"width: 700px;font-size:16px;font-family: 'Microsoft YaHei';\" cellpadding=\"0\" cellspacing=\"0\">\n" +
					"    <tr >\n" +
					"      <th  style=\"background-color: #f2f2f2;height: 30px;width:  700px; border:1px solid #e6e6e6;border-top:none;text-align: center;color: #333333;\" colspan=\"2\">收据</th>\n" +
					"    </tr>\n" +
					"    <tr style=\"width:  700px;\">\n" +
					"      <td style=\"border:1px solid #e6e6e6;border-top:none;text-align: center;color: #666666;height: 30px;\" >日期</td>\n" +
					"      <td  style=\"border:1px solid #e6e6e6;border-top:none;text-align: center;color: #666666;border-left: 0px;height: 30px;\">"+DateUtil.format(saleOrder.getCreateTime(), "yyyy-MM-dd HH:mm:ss")+"</td>\n" +
					"    </tr>\n" +
					"    <tr style=\"width:  700px;\">\n" +
					"      <td  style=\"border:1px solid #e6e6e6;border-top:none;text-align: center;color: #666666;height: 30px;\">交易编号</td>\n" +
					"      <td  style=\"border:1px solid #e6e6e6;border-top:none;text-align: center;color: #666666;border-left: 0px;height: 30px;\">"+saleOrder.getOrderCode()+"</td>\n" +
					"    </tr>\n" +
					"    <tr style=\"width:  700px;\">\n" +
					"      <td  style=\"border:1px solid #e6e6e6;border-top:none;text-align: center;color: #666666;height: 30px;\">交易类型</td>\n" +
					"      <td  style=\"border:1px solid #e6e6e6;border-top:none;text-align: center;color: #666666;border-left: 0px;height: 30px;\">捐赠</td>\n" +
					"    </tr>\n" +
					"    <tr style=\"width:  700px;\">\n" +
					"      <td  style=\"border:1px solid #e6e6e6;border-top:none;text-align: center;color: #666666;height: 30px;\">交易金额</td>\n" +
					"      <td  style=\"border:1px solid #e6e6e6;border-top:none;text-align: center;color: #666666;border-left: 0px;height: 30px;\">"+saleOrder.getProductPrice()+"</td>\n" +
					"    </tr>\n" +
					"   <tr style=\"width:  700px;\">\n" +
					"      <td  style=\"border:1px solid #e6e6e6;border-top:none;text-align: center;color: #666666;height: 30px;\">付款人</td>\n" +
					"      <td  style=\"border:1px solid #e6e6e6;border-top:none;text-align: center;color: #666666;border-left: 0px;height: 30px;\">"+saleOrder.getUserName()+"</td>\n" +
					"    </tr>" +
					"</table>";
			imageGenerator.loadHtml(htmlstr);
			BufferedImage bufferedImage = getGrayPicture(imageGenerator.getBufferedImage());
			ByteArrayOutputStream outputStream = new ByteArrayOutputStream();
			try {
				ImageIO.write(bufferedImage, "jpg", outputStream);
				String base64Img = Base64.encodeBase64String(outputStream.toByteArray());
				String res = "data:image/jpg;base64," + base64Img.toString();
				modelAndView.addObject("imageres", res);

			} catch (IOException e) {
				e.printStackTrace();
			}finally {
				if(outputStream != null){
					try {
						outputStream.close();
					} catch (IOException e) {
						e.printStackTrace();
					}
				}
			}

This is used to reset the canvas background color 

public BufferedImage getGrayPicture(BufferedImage originalImage)
	{
		BufferedImage grayPicture;
		int imageWidth = originalImage.getWidth();
		int imageHeight = originalImage.getHeight();

		grayPicture = new BufferedImage(imageWidth, imageHeight,
				BufferedImage.TYPE_INT_RGB);
		ColorConvertOp cco = new ColorConvertOp(ColorSpace
				.getInstance(ColorSpace.CS_GRAY), null);
		cco.filter(originalImage, grayPicture);
		return grayPicture;
	}

 

front end:

            <img id="ringoImage" src="${imageres!''}" style="height: 100%">

effect:

loadUrl(url)  (从url载入html)
loadHtml(html) (载入本地html)
saveAsImage(file) (以图片形式保存html)
saveAsHtmlWithMap(file, imageUrl) (创建一个HTML文件包含客户端image-map)
getLinks()(列出所有在HTML文档的链接和相应href、目标、头衔、位置和尺寸)
getBufferedImage() (获得awt,html缓冲后的图片)
getLinksMapMarkup(mapName) (HTML代码段里获得的客户端image-map <地图>产生的链接)
get/setOrientation(orientation) (get/set文本定位)
get/setSize(dimension)  (设置生成图片大小)

 

Reference article

https://blog.csdn.net/luohaobubu/article/details/7414554?utm_source=blogxgwz5

https://blog.csdn.net/fykhlp/article/details/6204714