HTML转图片以及其中的一些坑（用js方法和用java方法）

╰+哭是因爲堅強的太久メ 2022-05-30 12:36 478阅读 0赞

有时我们需要将html直接转成图片，这就需要借助一些工具。

**一.javascript利用html2canvas.js转化**

基本原理就是利用 html2canvas.js插件，将html页面画到canvas里，再利用canvas.toDataURL()得到生成图片的base64码。

首先页面引入html2canvas.js和jquery.

html2canvas下载地址：[https://download.csdn.net/download/e5808/9650181][https_download.csdn.net_download_e5808_9650181]

用法示例如下：

html部分：

js部分：

html2canvas($(".content table"),{        //根据dom节点对象生成图片
        onrendered: function(canvas) {        //完成canvas绘制开始执行回调函数
            // document.body.appendChild(canvas);
            var data=canvas.toDataURL("image/jpeg",1);  //默认为"imgage/png"，1为0-1的压缩参数，如果png则压缩参数无效
            var b64 = data.split(",")[1];        //去掉data前面的前缀
            $.ajax({        //上传图片
                url : '<%=request.getContextPath()%>/common/saveImage',
                type : 'POST',
                data : {
                    image:b64        //将base64代码传到后台保存
                },
                async : false,
                success : function(data) {
                    if(data) {
                        alert("0")
                    }
                },
            });
        }
    })

java部分保存图片

@ResponseBody
        @RequestMapping(value = "/saveImage", produces = "text/html;charset=utf-8")
        public String saveImage(String image,HttpServletRequest req) {  //接受base64码
            String result="success";
            String path="d:/"+Math.random()*100+".jpeg"; //使用相对路径或绝对路径
            if (image == null) {
                return result;
            }
            BASE64Decoder decoder = new BASE64Decoder();  
            try {
                // 解密
                 byte[] b = decoder.decodeBuffer(image);
                // 处理数据
                for (int i = 0; i < b.length; ++i) {
                    if (b[i] < 0) {
                        b[i] += 256;
                    }
                }
                OutputStream out = new FileOutputStream(path);
                out.write(b);
                out.flush();
                out.close();
                return result;
                } catch (Exception e) {
                return result;
                }
        }

以上就可以完成html生成图片并保存。

**坑：**

var data=canvas.toDataURL("image/jpeg",1);

这里如果设为png的话，第二个参数是无效的，也就是说此时无法压缩图片。设为jpg也没用，只有设为jpeg时，第二个参数设为0-1之间的参数可以调整压缩比例。貌似原比例的话为0.92。

所以如果想压缩图片大小就设为“image/jpeg”，但如果页面内容没有设置背景色，你会发现生成的图片是一片黑，所以必须给要生成图片的dom节点设置背景色，但有背景色时图片占空间又会变大很多，这点比较无奈。png时不设背景色出现的是白色背景。

此方法会完整的展示dom节点内容，最好宽设置好，不然会跟浏览器宽相等，使其变形

**二 . java中用html2Image插件生成图片**

下载html2image-0.9.jar。

下载地址:[点击打http://download.csdn.net/download/u013296643/10115762开链接][http_download.csdn.net_download_u013296643_10115762]

首先引入jar包或依赖。

1.读取html文件生成字符串

/**
     * 
     * @Description 读取HTML文件，获取字符内容
     * @param filePath
     * @param charset
     * @return
     */
    public static String getHtmlContent(String filePath, String charset){
    
        String line = null;   
        StringBuilder sb = new StringBuilder(); 
        BufferedReader reader = null;
    
        try {  
            reader = new BufferedReader(new InputStreamReader(new FileInputStream(new File(filePath)),charset));
            while ((line = reader.readLine()) != null) {   
                sb.append(line + "\n");
            } 
        } catch (IOException e) {   
            e.printStackTrace();
            throw new RuntimeException("读取HTML文件，获取字符内容异常");
        } finally {   
            try {   
                reader.close();   
            } catch (IOException e) {  
                e.printStackTrace();
                throw new RuntimeException("关闭流异常");
            }   
        }   
        return sb.toString();
    }

2.保存图片

HtmlImageGenerator imageGenerator = new HtmlImageGenerator();
            
    imageGenerator.loadHtml(htmlstr);//html文件生成的字符串
    
    imageGenerator.getBufferedImage();
    
    imageGenerator.saveAsImage("d:/hello-world.png"); //设置保存路径

或者

HtmlImageGenerator imageGenerator = new HtmlImageGenerator();
    
    imageGenerator.loadUrl("hello-world.html");  //直接加载html路径，省的转换字符串了
    
    imageGenerator.getBufferedImage();
    
    imageGenerator.saveAsImage("d:/hello-world.png");

或者

HtmlImageGenerator imageGenerator = new HtmlImageGenerator();
    
    imageGenerator.saveAsHtmlWithMap("hello-world.html", "hello-world.png");

// html2image  api介绍

### HtmlImageGenerator Methods ###

*  loadUrl(url) - Loads HTML from URL object or URL string. (从url载入html)
 *  loadHtml(html) - Loads HTML source. (载入本地html)

*  saveAsImage(file) - Save loaded HTML as image. (以图片形式保存html)
 *  saveAsHtmlWithMap(file, imageUrl) - Creates an HTML file containing client-side image-map <map>generated from HTML's links. (创建一个HTML文件包含客户端image-map)

*  getLinks() - List all links in the HTML document and their corresponding href, target, title, position and dimension. (列出所有在HTML文档的链接和相应href、目标、头衔、位置和尺寸)
 *  getBufferedImage() - Get AWT buffered image of the HTML. (获得awt,html缓冲后的图片)
 *  getLinksMapMarkup(mapName) - Get HTML snippet of the client-side image-map <map> generated from the links. (HTML代码段里获得的客户端image-map <地图>产生的链接)

*  get/setOrientation(orientation) - Get/Set document orientation (left-to-right or right-to-left). (get/set文本定位)
 *  get/setSize(dimension) - Get/Set size of the generated image. (设置生成图片大小)

建议使用第二种放方法，这样生成的图片又小又清晰。指定生成图片路径的后缀名设为什么，生成图片就是什么格式的。

**坑：**

在jdk1.7中table会无法去除双边框，jdk1.6中是正常的

[https_download.csdn.net_download_e5808_9650181]: https://download.csdn.net/download/e5808/9650181
[http_download.csdn.net_download_u013296643_10115762]: http://download.csdn.net/download/u013296643/10115762