公司要求将一些重要数据全部以图片的形式放在官网上，防止网络爬虫。
之前都是UI作图，人工上传，为了解放生产力，于是我们程序处理。
步骤：
1、html得到与原图一致的图片（交给前端处理）
2、html转png
3、配置动态html转动态png，放到对应位置
解决过程：
1、百度找插件
2、百度找插件
3、问人
4、研究替换使用
方案一：
html2canvas插件
官网地址：
http://html2canvas.hertzen.com/
使用例子：
蚂米平台实时运营数据 数据统计截止时间：2018-05-27
交易数据
数据概览
204571155.20 累计借贷金额（元）204571155.20 累计借贷金额（元）204571155.20 累计借贷金额（元）204571155.20 累计借贷金额（元）204571155.20 累计借贷金额（元）204571155.20 累计借贷金额（元）204571155.20 累计借贷金额（元）204571155.20 累计借贷金额（元）数据概览
204571155.20 累计借贷金额（元）204571155.20 累计借贷金额（元）204571155.20 累计借贷金额（元）204571155.20 累计借贷金额（元）204571155.20 累计借贷金额（元）出借方和借款方信息
204571155.20 累计借贷金额（元）204571155.20 累计借贷金额（元）204571155.20 累计借贷金额（元）204571155.20 累计借贷金额（元）204571155.20 累计借贷金额（元）204571155.20 累计借贷金额（元）
中间遇到问题：
结果：
样式有些缺失，官网明确指出不支持box-shadow等css样式
方案二：使用svg的forginObject属性将dom内容放入svg
链接：https://www.zhihu.com/question/20681535 中dion的回答
拷贝它的写法在我们的基础上修改，但是最后图片是svg形式。
Input Div:
蚂米平台实时运营数据 数据统计截止时间：2018-05-27
交易数据
数据概览
204571155.20 累计借贷金额（元）204571155.20 累计借贷金额（元）204571155.20 累计借贷金额（元）204571155.20 累计借贷金额（元）204571155.20 累计借贷金额（元）204571155.20 累计借贷金额（元）204571155.20 累计借贷金额（元）204571155.20 累计借贷金额（元）数据概览
204571155.20 累计借贷金额（元）204571155.20 累计借贷金额（元）204571155.20 累计借贷金额（元）204571155.20 累计借贷金额（元）204571155.20 累计借贷金额（元）出借方和借款方信息
204571155.20 累计借贷金额（元）204571155.20 累计借贷金额（元）204571155.20 累计借贷金额（元）204571155.20 累计借贷金额（元）204571155.20 累计借贷金额（元）204571155.20 累计借贷金额（元）Output Image:
中途遇到的问题：
svg对应image width和height没有正确设置，导致输出部分有时候展示不全
结果：
得到了svg，但是无法得到png
替代做法，使用svg代替png为图片资源，引用如下，t1.svg是从前面展示的out里面图片另存为得到的：
方案三：dom->svg->canvas->png
参考链接：http://www.zhangxinxu.com/wordpress/2017/08/svg-foreignobject/
代码：
蚂米平台实时运营数据 数据统计截止时间：2018-05-27
交易数据
数据概览
204571155.20 累计借贷金额（元）204571155.20 累计借贷金额（元）204571155.20 累计借贷金额（元）204571155.20 累计借贷金额（元）204571155.20 累计借贷金额（元）204571155.20 累计借贷金额（元）204571155.20 累计借贷金额（元）204571155.20 累计借贷金额（元）数据概览
204571155.20 累计借贷金额（元）204571155.20 累计借贷金额（元）204571155.20 累计借贷金额（元）204571155.20 累计借贷金额（元）204571155.20 累计借贷金额（元）出借方和借款方信息
204571155.20 累计借贷金额（元）204571155.20 累计借贷金额（元）204571155.20 累计借贷金额（元）204571155.20 累计借贷金额（元）204571155.20 累计借贷金额（元）204571155.20 累计借贷金额（元）![]()
中途问题：
canvas转png时候得到的背景总是黑色的，听说转png时候是透明背景，jpeg是黑色背景，在toDataURL()中指定转换的类型
解决方案：
//白色背景 context.fillStyle = '#fff'; context.fillRect(0, 0, canvas.width, canvas.height);
基本上就这样了。