java 使用Html2Image将html转图片

布满荆棘的人生 2023-06-18 15:55 25阅读 0赞

需要的jar 第二个jar是工具类是用于日期转换的 第一个才是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>

转换代码

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();
    					}
    				}
    			}

这个是用于重新设置画布背景颜色的

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;
    	}

前端:

效果:

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MzEzNTk2_size_16_color_FFFFFF_t_70][]

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)  (设置生成图片大小)

参考文章

[https://blog.csdn.net/luohaobubu/article/details/7414554?utm\_source=blogxgwz5][https_blog.csdn.net_luohaobubu_article_details_7414554_utm_source_blogxgwz5]

[https://blog.csdn.net/fykhlp/article/details/6204714][https_blog.csdn.net_fykhlp_article_details_6204714]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MzEzNTk2_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191203141147330.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MzEzNTk2,size_16,color_FFFFFF,t_70
[https_blog.csdn.net_luohaobubu_article_details_7414554_utm_source_blogxgwz5]: https://blog.csdn.net/luohaobubu/article/details/7414554?utm_source=blogxgwz5
[https_blog.csdn.net_fykhlp_article_details_6204714]: https://blog.csdn.net/fykhlp/article/details/6204714