[JavaWeb]将Web页面内容生成图片
在工作中遇到一个需求，是要将Web页面内容生成一张图片，然后导出下载。
下面是四种不同的实现方式：
- (1)此方法需要用到html2image-0.9.jar
/**
* html2image-0.9.jar
*
* HtmlImageGenerator 常用方法
*
* 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) - (设置生成图片大小)
*/举例：
HtmlImageGenerator imageGenerator = new HtmlImageGenerator();
imageGenerator.loadUrl("http://www.baidu.com");
imageGenerator.saveAsImage("d:/hello-world.png");
imageGenerator.saveAsHtmlWithMap("hello-world.html", "hello-world.png");- (2)此方法需要用到Cobra.jar
JFrame window = new JFrame();
HtmlPanel panel = new HtmlPanel();
window.getContentPane().add(panel);
window.setSize(600, 400);
window.setVisible(true);
new SimpleHtmlRendererContext(panel, new SimpleUserAgentContext())
.navigate("http://www.baidu.com");
BufferedImage image = new BufferedImage(panel.getWidth(),
panel.getHeight(), BufferedImage.TYPE_INT_ARGB);
// paint the editor onto the image
SwingUtilities.paintComponent(image.createGraphics(), panel,
new JPanel(), 0, 0, image.getWidth(), image.getHeight());
// save the image to file
ImageIO.write((RenderedImage) image, "png", new File("html.png"));- (3) 此方法不需要任何相关Jar支持
/**
* 方法详解：该方法利用Robat提供的强大桌面操作能力
* 硬性调用浏览器打开指定网页，并将网页信息保存到本地。
* 优势：简单易用，不需要任何第三方插件。
* 缺点：不能同时处理大量数据，技术含量过低，属于应急型技巧。
* @throws URISyntaxException
* @throws IOException
* @throws MalformedURLException
* @throws AWTException
*
*/
public static void test3() throws MalformedURLException,
IOException, URISyntaxException, AWTException{
//此方法仅适用于JdK1.6及以上版本
Desktop.getDesktop().browse(
new URL("http://www.baidu.com").toURI());
Robot robot = new Robot();
robot.delay(10000);
Dimension d = new Dimension(Toolkit.getDefaultToolkit().getScreenSize());
int width = (int) d.getWidth();
int height = (int) d.getHeight();
//最大化浏览器
robot.keyRelease(KeyEvent.VK_F11);
robot.delay(2000);
Image image = robot.createScreenCapture(new Rectangle(0, 0, width,
height));
BufferedImage bi = new BufferedImage(width, height,
BufferedImage.TYPE_INT_RGB);
Graphics g = bi.createGraphics();
g.drawImage(image, 0, 0, width, height, null);
//保存图片
ImageIO.write(bi, "jpg", new File("d:/111.jpg"));
}- (4) 使用H5技术，将页面截图，传入后台
前端处理
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="./jquery-1.9.1.js">script>
<script type="text/javascript" src="http://html2canvas.hertzen.com/build/html2canvas.js">script>
<script type="text/javascript" >
$(document).ready( function(){
$(".example1").on("click", function(event) {
event.preventDefault();
html2canvas(document.body, {
allowTaint: true,
taintTest: false,
onrendered: function(canvas) {
canvas.id = "mycanvas";
//document.body.appendChild(canvas);
//生成base64图片数据
var dataUrl = canvas.toDataURL();
var newImg = document.createElement("img");
newImg.src = dataUrl;
document.body.appendChild(newImg);
}
});
});
});
script>
head>
<body>
Hello!
<div class="" style="background-color: #abc;">
测试html5页面截图
<br>jsjtt.com
div>
<textArea id="textArea" col="20" rows="10" >textArea>
<input class="example1" type="button" value="button">
生成界面如下：
body>
html>后台处理
/**
* 使用H5 CANVAS技术,解析当前页面并且生成Base64数据传入后台,后台将数据生成图片
* @throws IOException
*/
public static void test4() throws IOException {
String base64ImgData = "后台传过来的Base64数据" ;
String filePath = "d:/11.jpg";
convertBase64DataToImage(base64ImgData, filePath);
}
/**
* 把base64图片数据转为本地图片
* @param base64ImgData
* @param filePath
* @throws IOException
*/
public static void convertBase64DataToImage
(String base64ImgData,String filePath) throws IOException {
BASE64Decoder d = new BASE64Decoder();
byte[] bs = d.decodeBuffer(base64ImgData);
FileOutputStream os = new FileOutputStream(filePath);
os.write(bs);
os.close();
}