[JavaWeb]将Web页面内容生成图片

来源：互联网发布：hex文件转换成c语言编辑：程序博客网时间：2024/05/29 16:06

在工作中遇到一个需求，是要将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技术，将页面截图，传入后台
前端处理

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

4 0