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

    有时我们需要将html直接转成图片，这就需要借助一些工具。
一.javascript利用html2canvas.js转化
    基本原理就是利用 html2canvas.js插件，将html页面画到canvas里，再利用canvas.toDataURL()得到生成图片的base64码。

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

       html2canvas下载地址：https://download.csdn.net/download/e5808/9650181

       用法示例如下：

    html部分：
<div class="content" style="">
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</table>
</div>    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开链接
    首先引入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中是正常的