前端借助dom-to-image把HTML转成图片并通过ajax上传到服务器

之前接到了一个任务，把jsp中的table转成一个图片，保存在指定文件夹并显示在前端。

我的思路是：一、引用第三方js在前端把table转成图片

二、通过ajax把图片上传到服务器，保存在指定文件夹

三、浏览器根据文件名从服务器端获取图片

一、引用第三方js在前端把table转成图片

一开始我在百度找到了比较多人用过的html2canvas，据说很多坑，但由于这些坑都是几年前被发现的，我觉得现在更新了这么多个版本应该没啥问题了吧。考虑到稳定性，我下载了0.4.1版本，还真的有坑，只能把可视区域内的html给转换出来，毕竟我的表格数据多变，这种效果肯定是不行的。

经过了一轮的百度，我从一位大神的贴子中找到了解决方法，需要0.5.0版本，使用html2canvas实现浏览器截图。解决方法是修改一小段源码，通过设置截图区域的width和height来截取内容，于是我把width和height分别附上table的div的宽和高，出来的效果是——还是差一点，虽然能突破了只能在可视区域截取内容的障碍，但是再截图区域的宽高设置上还得手动给它加个几十像素去让它截取完整，这样肯定会出bug。

一番折腾后，我放弃了这个插件了，不好用。转战谷歌，看看有啥更好地第三方插件

dom-to-image介绍

这是一个与html2canvas功能差不多的第三方js插件，能够把dom节点转换为矢量图（svg）和位图（png和jpeg），完美解决了html2canvas出现过的坑。

使用的代码如下（转成png）：

无论我的表格有多大，它都能全部获取到，图片稍微失真。

二、通过ajax把图片上传到服务器，保存在指定文件夹

  我发现dom-to-image返回的png图片是通过Base64编码的，表现的方式基本如下：

需要在后台进行解码才能保存为文件（需要注意的是，把“data:image/jpeg;base64”去掉再进行解码，否则生成的文件会提示已损坏）

  但是问题来了，当我的表格数据多的时候，发现导出来的图片已损坏。原因是字符串过长提交失败，网上的说法也不一致，有的说post限制2m的提交，要更改服务器配置（本人用的tomcat）；也有说post无限制，无需修改。修改配置的方法我试过，没效果，无需修改？明明不行啊……

经过多次的尝试，我发现转成Blob图片后使用ajax传输到后台并不会出现上述问题。而且用原生的ajax并非jquery封装过的ajax，代码如下：

  所以后台无需进行解码，而是在ajax里的url所请求的servlet中把Blob图片转存到指定文件夹中即可，servlet的代码如下：

三、浏览器根据文件名从服务器端获取图片

Servlet的代码如下：

所用到的ServletUtil方法代码如下：

希望对大家有帮助，多多交流。

海报图正在生成中...

竖版 宽版