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

一.javascript利用html2canvas.js转化

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

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

html2canvas下载地址：html2canvas.js_html12canvas下载-Javascript代码类资源-CSDN下载

用法示例如下：

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中是正常的

ps:2022-08-30更新！！！！

现在在前端生成图片发现不太清晰，所以又找到清晰图片的方法，亲测有效

作者在 html2canvas 的源码中添加了两个参数，分别为 scale 和 dpi，scale 是比例，辣么 dpi 是个什么玩意儿，以下是百度百科对 dpi 的定义：

DPI 是指每英寸的像素，也就是扫描精度。DPI 越低，扫描的清晰度越低，由于受网络传输速度的影响，web 上使用的图片都是 72dpi，但是冲洗照片不能使用这个参数，必须是 300dpi 或者更高 350dpi。例如要冲洗 46 英寸的照片，扫描精度必须是 300dpi，那么文件尺寸应该是(4300)(6300)=1200 像素*1800 像素。只要增大 dpi 或者 scale 肯定能使同样宽高的图像变得清晰，那么模糊的问题也就不存在了。

参数名称	类型	默认值	描述
scale	number	1	按比例增加分辨率 (2=双倍).
dpi	number	96	将分辨率提高到特定的 DPI（每英寸点数）

必须要把文件下载到本地

点击此链接手动下载 html2canvas 到本地项目

也就是说先下载这个新版插件，再配合我的js方法就行了

//点击下载图片触发这个方法
function saveToImg(){//得加这几句，先让页面滚到顶上，不然会出现截取图片只有一半的问题window.pageYoffset = 0;document.documentElement.scrollTop = 0;document.body.scrollTop = 0;html2canvas(document.querySelector(".container"), {// 以下字段可选allowTaint: true,//Whether to test each image if it taints the canvas before drawing themtaintTest: false,foreignObjectRendering: true, // 是否在浏览器支持的情况下使用ForeignObject渲染useCORS: true, // 是否尝试使用CORS从服务器加载图像async: false, // 是否异步解析和呈现元素// 以下字段必填background: "#ffffff", // 一定要添加背景颜色，否则出来的图片，背景全部都是透明的scale: 2, // 处理模糊问题dpi: 300, // 处理模糊问题onrendered: function (canvas) {let url = canvas.toDataURL();console.log(url);//AndroidJs.saveImg(url)//测试浏览器直接下载图片const a = document.createElement("a"); // 生成一个a元素const event = new MouseEvent("click"); // 创建一个单击事件a.download = "aaa.png" || "photo"; // 设置图片名称a.href = url; // 将生成的URL设置为a.href属性a.dispatchEvent(event); // 触发a的单击事件},});
}

注意下载时先让scrollTop变为0，不然下载的图片只有截取到屏幕显示的部分

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

移动端H5图片上传的那些坑
上周做一个关于移动端图片压缩上传的功能.期间踩了几个坑,在此总结下. 大体的思路是,部分API的兼容性请参照caniuse: 利用FileReader,读取blob对象,或者是file对象,将图片转化 ...
antd 图片上传遇到的坑----图片回显（Upload）
antd 图片上传遇到的坑----图片回显(Upload) 最近又被安排了一个前端的项目,遇到了一个图片上传的问题,用的是antd的Upload组件,在这遇到的问题和大家分享一下,下网可以帮到需要的人 ...
图片流转base64遇到的坑
Java学习问题2:网络传输的图片转base64遇到的坑 1.之前写图片转base64流的写法 File file = new File("D:\\test\\img11.jpg" ...
联想集群超算LICO初次使用踩坑说明（遇到的错误，一些使用方法和singularity新建容器方法）
联想集群超算LICO初次使用踩坑说明(遇到的错误,一些使用方法和singularity新建容器方法) 说明本文主要写一些我这几天初次使用LICO的过程中遇到的一点问题和解决的办法,还有一些模块的规范 ...
php图片特效,php_imagick实现图片剪切、旋转、锐化、减色或增加特效的方法
本文实例讲述了php_imagick实现图片剪切.旋转.锐化.减色或增加特效的方法.分享给大家供大家参考.具体分析如下: 一个可以供PHP调用ImageMagick功能的PHP扩展.使用这个扩展可以使 ...
html文字图片同一行,CSS控制图片和文字在同一行显示且对齐的3种方法
CSS控制图片和文字在同一行显示且对齐的3种方法在 HTML 代码中,有时会需要在文字旁边加上一个图标. 默认情况,是图片置顶对齐,文字置底对齐,所以通常图片高,文字低,不能水平居中对齐. 常见欢思 ...
html图片自动切换的幻灯片效果的,js带点自动图片轮播幻灯片特效代码分享
本文实例讲述了javascript带点自动图片轮播幻灯片特效.分享给大家供大家参考.具体如下: 这是一款基于javascript实现带点自动图片轮播幻灯片特效代码,实现过程很简单. 运行效果图:--- ...
qt5 传输图片压缩_图片如何转换成pdf？免费教你几个宝藏方法，请低调使用！...
图片如何转换成pdf?很多人在传输图片的时候都喜欢直接打包文件将其压缩再传送,其实这样并不方便他人查看,并且受到压缩/解压缩工具的限制,很可能对方压根无法查看收到的图片.建议大家可以尝试把图片转换为P ...
图片自适应父元素大小，并左右上下居中的css方法
图片自适应父元素大小,并左右上下居中的css方法前言这种效果多见于矩形盒子里面调用不规则的图片,希望能够达到的效果.这个效果可以很简单的用css来实现,虽然已经烂熟于心,但是并未记录下来.今天看到 ...

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

HtmlImageGenerator Methods

ps:2022-08-30更新！！！！

必须要把文件下载到本地

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

最新文章

热门文章