| 1 | 2 | 3 | 4 |
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部分：
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 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 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中是正常的