用java代码根据html页面生成图片

最新推荐文章于 2024-04-28 19:06:53 发布

_WJerry

最新推荐文章于 2024-04-28 19:06:53 发布

阅读量3.2w

点赞数 5

分类专栏： java 文章标签： java html 图片

本文链接：https://blog.csdn.net/sunnyjerry/article/details/78116156

版权

java 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

最近因公司要搞活动，需要在微信公众号中用户点击按钮后返回一张即时生成的海报给用户，这张海报需要包含该用户头像、姓名、跳转活动页面的二维码，跟微信如何对接我这里就不赘述了，说一说如何生成这张海报。

	首先说说我一开始的思路，最先听到这个需求的时候，心中不免有些轻视，就这点玩意不是三两下就搞定了，于是信心慢慢的回应“so easy！”。由于我是做安卓+web前端的，所以我完全按照web前端的思路来，上网找js插件，一搜哈哈，果然很简单，一大堆啊！等到准备上手做的时候，后台哥们说服务器端没有让你运行html的环境啊。。。wtf！！！
	然后我心想，不行，不能让运营妹子看不起，一定要搞定！于是开始找纯java的实现方式，准备完全由后台完成整个过程，虽然我是前端，但是安卓至少也是java的啊，所以不能输了阵势！

以下开始说找纯java实现方式的坑，急着要解决方式的直接拉到后面，跳过这段，但是我觉得应该还是有很多人会看这段的，因为毕竟我平常看别人才坑心中不知道多开心。。。

首先说明一下我要实现的效果图（由于是公司活动，所以除了要动态更换的地方都打码了）：
原图效果

第一种方式：Java Core API

public class HtmlToImage {  
    protected static void generateOutput() throws Exception {  
        JEditorPane ed = new JEditorPane(new URL("http://localhost:8080/a/index.html"));  
        ed.setSize(2000,2000);  
  
        //create a new image  
        BufferedImage image = new BufferedImage(ed.getWidth(), ed.getHeight(),  
                                                BufferedImage.TYPE_INT_ARGB);  
  
        //paint the editor onto the image  
        SwingUtilities.paintComponent(image.createGraphics(),   
                                      ed,   
                                      new JPanel(),   
                                      0, 0, image.getWidth(), image.getHeight());  
        //save the image to file  
        ImageIO.write((RenderedImage)image, "png", new File("html.png"));  
    }  
    public static void main(String[] args) {  
        try {  
            generateOutput();  
        } catch (Exception e) {  
            e.printStackTrace();  
        }  
    }  
  
}

这种方式实现出来的效果：
错误1

可以看到这个不识别里面的某些属性，头像二维码之类的定位都没有效果。。

第二种方式：java-html2image
这种需要下载插件，但是这种方式对于稍微复杂的页面效果也不好，所以就不提供插件了，网上很多。使用方式也有，这里就不说了。
首先说说这种方式的loadHtml()，这个api调用之后效果是这样：
错误2

图片是我随便在网上找的，可以看到错位严重。

这个插件还有第二种方式，loadUrl(),调用之后的效果（用公司需要的效果图试的）：
错误3

可以看到和第一个方法的效果一样。

最后说正确的打开方式：
首先附上原文链接：
原文链接

这个方法需要用到3个jar包：DJNativeSwing-SWT.jar、DJNativeSwing.jar、swt-win-x64.jar，我把它们都整合到一个jar包里了，jar包链接：jar包链接

根据原文中的代码，我稍加修改了一点：

public class PrintScreen4DJNativeSwingUtils extends JPanel {
	private static final long serialVersionUID = 1L;
	// 行分隔符
	final static public String LS = System.getProperty("line.separator", "/n");
	// 文件分割符
	final static public String FS = System.getProperty("file.separator", "//");
	// 当网页超出目标大小时 截取
	final static public int maxWidth = 2000;
	final static public int maxHeight = 2000;

	/**
	 * @param file
	 *            预生成的图片全路径
	 * @param url
	 *            网页地址
	 * @param width
	 *            打开网页宽度 ，0 = 全屏
	 * @param height
	 *            打开网页高度 ，0 = 全屏
	 * @return boolean
	 * @author AndyBao
	 * @version V4.0, 2016年9月28日 下午3:55:52
	 */
	public PrintScreen4DJNativeSwingUtils(final String file, final String url,
			final String WithResult) {
		super(new BorderLayout());
		JPanel webBrowserPanel = new JPanel(new BorderLayout());
		final JWebBrowser webBrowser = new JWebBrowser(null);
		webBrowser.setBarsVisible(false);
		webBrowser.navigate(url);
		webBrowserPanel.add(webBrowser, BorderLayout.CENTER);
		add(webBrowserPanel, BorderLayout.CENTER);
		JPanel panel = new JPanel(new FlowLayout(FlowLayout.CENTER, 4, 4));
		webBrowser.addWebBrowserListener(new WebBrowserAdapter() {
			// 监听加载进度
			public void loadingProgressChanged(WebBrowserEvent e) {
				// 当加载完毕时
				if (e.getWebBrowser().getLoadingProgress() == 100) {
					String result = (String) webBrowser
							.executeJavascriptWithResult(WithResult);
					int index = result == null ? -1 : result.indexOf(":");
					NativeComponent nativeComponent = webBrowser
							.getNativeComponent();
					Dimension originalSize = nativeComponent.getSize();
					Dimension imageSize = new Dimension(Integer.parseInt(result
							.substring(0, index)), Integer.parseInt(result
							.substring(index + 1)));
					imageSize.width = Math.max(originalSize.width,
							imageSize.width);
					imageSize.height = Math.max(originalSize.height,
							imageSize.height);
					nativeComponent.setSize(imageSize);
					BufferedImage image = new BufferedImage(imageSize.width,
							imageSize.height, BufferedImage.TYPE_INT_RGB);
					nativeComponent.paintComponent(image);
					nativeComponent.setSize(originalSize);
					// 当网页超出目标大小时
					if (imageSize.width > maxWidth
							|| imageSize.height > maxHeight) {
						// 截图部分图形
						image = image.getSubimage(0, 0, maxWidth, maxHeight);
						// 此部分为使用缩略图
						/*
						 * int width = image.getWidth(), height = image
						 * .getHeight(); AffineTransform tx = new
						 * AffineTransform(); tx.scale((double) maxWidth /
						 * width, (double) maxHeight / height);
						 * AffineTransformOp op = new AffineTransformOp(tx,
						 * AffineTransformOp.TYPE_NEAREST_NEIGHBOR); //缩小 image
						 * = op.filter(image, null);
						 */
					}
					try {
						// 输出图像
						ImageIO.write(image, "jpg", new File(file));
					} catch (IOException ex) {
						ex.printStackTrace();
					}
					// 退出操作
					System.exit(0);
				}
			}
		});
		add(panel, BorderLayout.SOUTH);

	}

	// 以javascript脚本获得网页全屏后大小
	public static String getScreenWidthHeight() {

		StringBuffer jsDimension = new StringBuffer();
		jsDimension.append("var width = 0;").append(LS);
		jsDimension.append("var height = 0;").append(LS);
		jsDimension.append("if(document.documentElement) {").append(LS);
		jsDimension
				.append("  width = Math.max(width, document.documentElement.scrollWidth);")
				.append(LS);
		jsDimension
				.append("  height = Math.max(height, document.documentElement.scrollHeight);")
				.append(LS);
		jsDimension.append("}").append(LS);
		jsDimension.append("if(self.innerWidth) {").append(LS);
		jsDimension.append("  width = Math.max(width, self.innerWidth);")
				.append(LS);
		jsDimension.append("  height = Math.max(height, self.innerHeight);")
				.append(LS);
		jsDimension.append("}").append(LS);
		jsDimension.append("if(document.body.scrollWidth) {").append(LS);
		jsDimension.append(
				"  width = Math.max(width, document.body.scrollWidth);")
				.append(LS);
		jsDimension.append(
				"  height = Math.max(height, document.body.scrollHeight);")
				.append(LS);
		jsDimension.append("}").append(LS);
		jsDimension.append("return width + ':' + height;");

		return jsDimension.toString();
	}

	public static boolean printUrlScreen2jpg(final String file,
			final String url, final int width, final int height) {

		NativeInterface.open();
		SwingUtilities.invokeLater(new Runnable() {
			public void run() {
				String withResult = "var width = " + width + ";var height = "
						+ height + ";return width +':' + height;";
				if (width == 0 || height == 0)
					withResult = getScreenWidthHeight();

				// SWT组件转Swing组件，不初始化父窗体将无法启动webBrowser
				JFrame frame = new JFrame("网页截图");
				// 加载指定页面，最大保存为640x480的截图
				frame.getContentPane().add(
						new PrintScreen4DJNativeSwingUtils(file, url,
								withResult), BorderLayout.CENTER);
				frame.setSize(640, 480);
				// 仅初始化，但不显示
				frame.invalidate();

				frame.pack();
				frame.setVisible(false);
			}
		});
		NativeInterface.runEventPump();

		return true;
	}
}

// 当网页超出目标大小时 截取
final static public int maxWidth = 2000;
final static public int maxHeight = 2000;

这里原文中maxHeight 是1400，我使用时报错，因为我的图片太大了，超过这个大小，所以报了一个(x+width) outsize的错误，我把这里改了之后就好了，而且我的高度超过了不知道为什么是说x+width的错误。

imageSize.width = Math.max(originalSize.width,imageSize.width);
imageSize.height = Math.max(originalSize.height,imageSize.height);

这里原文是imageSize.width + 50，imageSize.height+50，所以一开始生成的图片会有50像素的宽高的白边，去掉就好了。

调用：

PrintScreen4DJNativeSwingUtils.printUrlScreen2jpg("d:/hello-world.png", "http://localhost:8080/a/index.html", 0, 0);

有4个参数：图片保存路径，要截图的URL地址，裁剪图片的宽，裁剪图片的高

其中宽高传0的话代表按照图片的原始大小保存，也就是不做裁剪操作！到这里就大功告成了！

_WJerry

关注

5
点赞
踩
37

收藏

觉得还不错? 一键收藏
21
评论
用java代码根据html页面生成图片

最近因公司要搞活动，需要在微信公众号中用户点击按钮后返回一张即时生成的海报给用户，这张海报需要包含该用户头像、姓名、跳转活动页面的二维码，跟微信如何对接我这里就不赘述了，说一说如何生成这张海报。首先说说我一开始的思路，最先听到这个需求的时候，心中不免有些轻视，就这点玩意不是三两下就搞定了，于是信心慢慢的回应“so easy！”。由于我是做安卓+web前端的，所以我完全按照web前端的思路来，
复制链接

扫一扫