实现html转png

公司要求将一些重要数据全部以图片的形式放在官网上，防止网络爬虫。

之前都是UI作图，人工上传，为了解放生产力，于是我们程序处理。

步骤：

1、html得到与原图一致的图片（交给前端处理）

2、html转png

3、配置动态html转动态png，放到对应位置

解决过程：

1、百度找插件

2、百度找插件

3、问人

4、研究替换使用

方案一：

　　html2canvas插件

　　官网地址：

　　http://html2canvas.hertzen.com/

　　使用例子：　　

<html>

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <title></title>

<style>

.main{

  width: 900px;

  margin: 2rem auto;

  padding: 2rem 3rem;

  box-shadow:   23px #ddd6;

}

h1{

  text-align: center;

  font-size: 32px;

  color: #3e3e3e;

}

h1 span{

  text-align: center;

  font-size: 16px;

  color: #ddd;

  display: block;

}

h2{

  border-left: 5px solid #ff6a00;

  padding-left: 11px;

  font-size: 28px;

  font-weight: normal;

  line-height: 25px;

  margin-bottom: 50px;

  margin-top: 40px;

}

.box{

  width: %;

  box-shadow:   22px rgba(, , , 0.65);

  height: 6rem;

  padding: 1rem;

  font-size: 29px;

  text-align: center;

  margin-right:  %;

  display: inline-block;

  margin-bottom: %;

}

.box em{

  font-weight: bold;

  font-style: normal;

  display: block;

  line-height: .5rem;

  margin-top: 1rem;

  font-size: 27px;

}

.box span{

  font-size: 14px;

  color: #bdbdbd;

}

.clear{

  clear: both;

  visibility: hidden;

}

</style>

<script type="text/javascript" src="jquery.min.js"></script>

<script type="text/javascript" src="html2cavas.js"></script>

<script type="text/javascript">

$(function(){

    $("#saveImg").click(function(){

         html2canvas($(".main")[]).then(function(canvas) {

             var imgUri = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");

             //alert(imgUri);

             // 获取生成的图片的url

             window.location.href= imgUri; // 下载图片

         });

     });

});

</script>

</head>

<body>

<div class='main'>

  <h1>蚂米平台实时运营数据

    <span>数据统计截止时间：--</span>

  </h1>

  <div>

    <h2>交易数据</h2>

    <h3>数据概览</h3>

    <div class='box'>

      <em>204571155.20</em>

      <span>累计借贷金额（元）</span>

    </div>

    <div class='box'>

      <em>204571155.20</em>

      <span>累计借贷金额（元）</span>

    </div>

    <div class='box'>

      <em>204571155.20</em>

      <span>累计借贷金额（元）</span>

    </div>

    <div class='box'>

      <em>204571155.20</em>

      <span>累计借贷金额（元）</span>

    </div>

    <div class='box'>

        <em>204571155.20</em>

        <span>累计借贷金额（元）</span>

      </div>

      <div class='box'>

        <em>204571155.20</em>

        <span>累计借贷金额（元）</span>

      </div>

      <div class='box'>

        <em>204571155.20</em>

        <span>累计借贷金额（元）</span>

      </div>

      <div class='box'>

        <em>204571155.20</em>

        <span>累计借贷金额（元）</span>

      </div>

      <h3>数据概览</h3>

      <div class='box'>

        <em>204571155.20</em>

        <span>累计借贷金额（元）</span>

      </div>

      <div class='box'>

        <em>204571155.20</em>

        <span>累计借贷金额（元）</span>

      </div>

      <div class='box'>

        <em>204571155.20</em>

        <span>累计借贷金额（元）</span>

      </div>

      <div class='box'>

        <em>204571155.20</em>

        <span>累计借贷金额（元）</span>

      </div>

      <div class='box'>

        <em>204571155.20</em>

        <span>累计借贷金额（元）</span>

      </div>

      <h2>出借方和借款方信息</h2>

      <div class='box'>

          <em>204571155.20</em>

          <span>累计借贷金额（元）</span>

        </div>

        <div class='box'>

          <em>204571155.20</em>

          <span>累计借贷金额（元）</span>

        </div>

        <div class='box'>

          <em>204571155.20</em>

          <span>累计借贷金额（元）</span>

        </div>

        <div class='clear'></div>

        <div class='box'>

            <em>204571155.20</em>

            <span>累计借贷金额（元）</span>

          </div>

          <div class='box'>

            <em>204571155.20</em>

            <span>累计借贷金额（元）</span>

          </div>

          <div class='box'>

            <em>204571155.20</em>

            <span>累计借贷金额（元）</span>

          </div>

  </div>

</div>

<button id="saveImg">保存图片</button>

</body>

</html>

中间遇到问题：

结果：

　　样式有些缺失，官网明确指出不支持box-shadow等css样式

方案二：使用svg的forginObject属性将dom内容放入svg

链接：https://www.zhihu.com/question/20681535 中dion的回答

拷贝它的写法在我们的基础上修改，但是最后图片是svg形式。

<!DOCTYPE html>

<html>

<head>

<style>

.main{

  width: 900px;

  margin: 2rem auto;

  padding: 2rem 3rem;

  box-shadow:   23px rgba(, , , 0.4);

}

h1{

  text-align: center;

  font-size: 32px;

  color: #3e3e3e;

}

h1 span{

  text-align: center;

  font-size: 16px;

  color: #ddd;

  display: block;

}

h2{

  border-left: 5px solid #ff6a00;

  padding-left: 11px;

  font-size: 28px;

  font-weight: normal;

  line-height: 25px;

  margin-bottom: 50px;

  margin-top: 40px;

}

.box{

  width: %;

  box-shadow:   22px rgba(, , , 0.65);

  height: 6rem;

  padding: 1rem;

  font-size: 29px;

  text-align: center;

  margin-right:  %;

  display: inline-block;

  margin-bottom: %;

}

.box em{

  font-weight: bold;

  font-style: normal;

  display: block;

  line-height: .5rem;

  margin-top: 1rem;

  font-size: 27px;

}

.box span{

  font-size: 14px;

  color: #bdbdbd;

}

.clear{

  clear: both;

  visibility: hidden;

}

</style>

</head>

<body>

<h2>Input Div:</h2>

<div id="input" style="width:900px">

<div class='main' id="main">

  <h1>蚂米平台实时运营数据

    <span>数据统计截止时间：--</span>

  </h1>

  <div>

    <h2>交易数据</h2>

    <h3>数据概览</h3>

    <div class='box'>

      <em>204571155.20</em>

      <span>累计借贷金额（元）</span>

    </div>

    <div class='box'>

      <em>204571155.20</em>

      <span>累计借贷金额（元）</span>

    </div>

    <div class='box'>

      <em>204571155.20</em>

      <span>累计借贷金额（元）</span>

    </div>

    <div class='box'>

      <em>204571155.20</em>

      <span>累计借贷金额（元）</span>

    </div>

    <div class='box'>

        <em>204571155.20</em>

        <span>累计借贷金额（元）</span>

      </div>

      <div class='box'>

        <em>204571155.20</em>

        <span>累计借贷金额（元）</span>

      </div>

      <div class='box'>

        <em>204571155.20</em>

        <span>累计借贷金额（元）</span>

      </div>

      <div class='box'>

        <em>204571155.20</em>

        <span>累计借贷金额（元）</span>

      </div>

      <h3>数据概览</h3>

      <div class='box'>

        <em>204571155.20</em>

        <span>累计借贷金额（元）</span>

      </div>

      <div class='box'>

        <em>204571155.20</em>

        <span>累计借贷金额（元）</span>

      </div>

      <div class='box'>

        <em>204571155.20</em>

        <span>累计借贷金额（元）</span>

      </div>

      <div class='box'>

        <em>204571155.20</em>

        <span>累计借贷金额（元）</span>

      </div>

      <div class='box'>

        <em>204571155.20</em>

        <span>累计借贷金额（元）</span>

      </div>

      <h2>出借方和借款方信息</h2>

      <div class='box'>

          <em>204571155.20</em>

          <span>累计借贷金额（元）</span>

        </div>

        <div class='box'>

          <em>204571155.20</em>

          <span>累计借贷金额（元）</span>

        </div>

        <div class='box'>

          <em>204571155.20</em>

          <span>累计借贷金额（元）</span>

        </div>

        <div class='clear'></div>

        <div class='box'>

            <em>204571155.20</em>

            <span>累计借贷金额（元）</span>

          </div>

          <div class='box'>

            <em>204571155.20</em>

            <span>累计借贷金额（元）</span>

          </div>

          <div class='box'>

            <em>204571155.20</em>

            <span>累计借贷金额（元）</span>

          </div>

  </div>

</div>

</div>

<h2>Output Image:</h2>

<script>

var divContent = document.getElementById('input').innerHTML;

var data = "data:image/svg+xml,"

+ "<svg xmlns='http://www.w3.org/2000/svg'>"

+ "<foreignObject width='100%' height='100%'>"

+ "<div xmlns='http://www.w3.org/1999/xhtml' style='font-size:16px;font-family:Helvetica'>"

+ divContent

+ "</div>"

+ "</foreignObject>"

+ "</svg>";

var img = new Image();

img.src = data;

img.width = "";

img.height = "";

document.getElementsByTagName('body')[].appendChild(img);

</script>

<img id="outputImg" />

</body>

</html>

中途遇到的问题：

svg对应image width和height没有正确设置，导致输出部分有时候展示不全

结果：

得到了svg，但是无法得到png

替代做法，使用svg代替png为图片资源，引用如下，t1.svg是从前面展示的out里面图片另存为得到的：

<html>

    <head></head>

    <body>

        <img src="t1.svg" style="display:block;width:1000px;height:2000px">

    </body>

</html>

方案三：dom->svg->canvas->png

参考链接：http://www.zhangxinxu.com/wordpress/2017/08/svg-foreignobject/

代码：

<html>

<head>

<style>

.main{

  width: 900px;

  margin: 2rem auto;

  padding: 2rem 3rem;

  box-shadow:   23px rgba(, , , 0.4);

}

h1{

  text-align: center;

  font-size: 32px;

  color: #3e3e3e;

}

h1 span{

  text-align: center;

  font-size: 16px;

  color: #ddd;

  display: block;

}

h2{

  border-left: 5px solid #ff6a00;

  padding-left: 11px;

  font-size: 28px;

  font-weight: normal;

  line-height: 25px;

  margin-bottom: 50px;

  margin-top: 40px;

}

.box{

  width: %;

  box-shadow:   22px rgba(, , , 0.65);

  height: 6rem;

  padding: 1rem;

  font-size: 29px;

  text-align: center;

  margin-right:  %;

  display: inline-block;

  margin-bottom: %;

}

.box em{

  font-weight: bold;

  font-style: normal;

  display: block;

  line-height: .5rem;

  margin-top: 1rem;

  font-size: 27px;

}

.box span{

  font-size: 14px;

  color: #bdbdbd;

}

.clear{

  clear: both;

  visibility: hidden;

}

</style>

</head>

<body>

<div class='main' id="main">

  <h1>蚂米平台实时运营数据

    <span>数据统计截止时间：--</span>

  </h1>

  <div>

    <h2>交易数据</h2>

    <h3>数据概览</h3>

    <div class='box'>

      <em>204571155.20</em>

      <span>累计借贷金额（元）</span>

    </div>

    <div class='box'>

      <em>204571155.20</em>

      <span>累计借贷金额（元）</span>

    </div>

    <div class='box'>

      <em>204571155.20</em>

      <span>累计借贷金额（元）</span>

    </div>

    <div class='box'>

      <em>204571155.20</em>

      <span>累计借贷金额（元）</span>

    </div>

    <div class='box'>

        <em>204571155.20</em>

        <span>累计借贷金额（元）</span>

      </div>

      <div class='box'>

        <em>204571155.20</em>

        <span>累计借贷金额（元）</span>

      </div>

      <div class='box'>

        <em>204571155.20</em>

        <span>累计借贷金额（元）</span>

      </div>

      <div class='box'>

        <em>204571155.20</em>

        <span>累计借贷金额（元）</span>

      </div>

      <h3>数据概览</h3>

      <div class='box'>

        <em>204571155.20</em>

        <span>累计借贷金额（元）</span>

      </div>

      <div class='box'>

        <em>204571155.20</em>

        <span>累计借贷金额（元）</span>

      </div>

      <div class='box'>

        <em>204571155.20</em>

        <span>累计借贷金额（元）</span>

      </div>

      <div class='box'>

        <em>204571155.20</em>

        <span>累计借贷金额（元）</span>

      </div>

      <div class='box'>

        <em>204571155.20</em>

        <span>累计借贷金额（元）</span>

      </div>

      <h2>出借方和借款方信息</h2>

      <div class='box'>

          <em>204571155.20</em>

          <span>累计借贷金额（元）</span>

        </div>

        <div class='box'>

          <em>204571155.20</em>

          <span>累计借贷金额（元）</span>

        </div>

        <div class='box'>

          <em>204571155.20</em>

          <span>累计借贷金额（元）</span>

        </div>

        <div class='clear'></div>

        <div class='box'>

            <em>204571155.20</em>

            <span>累计借贷金额（元）</span>

          </div>

          <div class='box'>

            <em>204571155.20</em>

            <span>累计借贷金额（元）</span>

          </div>

          <div class='box'>

            <em>204571155.20</em>

            <span>累计借贷金额（元）</span>

          </div>

  </div>

  <img/>

</div>

<button id="down">保存图片</button>

<script type="text/javascript">

// DOM转图片的方法

var domToImg = (function () {

    // 转png需要的canvas对象及其上下文

    var canvas = document.createElement('canvas');

    var context = canvas.getContext('2d');

    // canvas绘制图片元素方法

    var draw = function (img) {

        var width = img.width, height = img.height;

        // canvas绘制

        canvas.width = width;

        canvas.height = height;

        // 画布清除

        context.clearRect(, , width, height);

        //白色背景

        context.fillStyle = '#fff';

        context.fillRect(, , canvas.width, canvas.height);

        // 绘制图片到canvas

        context.drawImage(img, , );

    };

    // canvas画布绘制的原图片

    var img = new Image();

    // 回调

    var callback = function () {};

    // 图片回调

    img.onload = function () {

        draw(this);

        // 回调方法

        callback();

    };

    var exports = {

        dom: null,

        // DOM变成svg，并作为图片显示

        dom2Svg: function () {

            var dom = this.dom;

            if (!dom) {

                return this;

            }

            // 复制DOM节点

            var cloneDom = dom.cloneNode(true);

            cloneDom.setAttribute('xmlns', 'http://www.w3.org/1999/xhtml');

            cloneDom.classList.remove('outline');

            // 如果有图片，变成base64

            var imgDom = null;

            if (cloneDom.tagName.toLowerCase() == 'img') {

                imgDom = cloneDom;

            } else {

                // 这里就假设一个图片，多图自己遍历转换下就好了

                imgDom = cloneDom.querySelector('img');

            }

            if (imgDom) {

                draw(imgDom);

                //imgDom.src = canvas.toDataURL();

                imgDom.src = canvas.toDataURL("image/png");;

            }

            // 图片地址显示为DOM转换的svg

            img.src = 'data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="' + dom.offsetWidth + '" height="' + dom.offsetHeight + '"><foreignObject x="0" y="0" width="100%" height="100%">'+

                new XMLSerializer().serializeToString(cloneDom).replace(/#/g, '%23').replace(/\n/g, '%0A') +

                document.querySelector('style').outerHTML +

             '</foreignObject></svg>';

            return this;

        },

        // 作为图片下载，JS前端下载可参考这篇文章：

        // JS前端创建html或json文件并浏览器导出下载 - http://www.zhangxinxu.com/wordpress/?p=6252

        download: function () {

            // 创建隐藏的可下载链接

            var eleLink = document.createElement('a');

            // 下载图片文件名就按照时间戳来

            eleLink.download = 'zxx_png-' + (+new Date() + '').slice(, ) + '.png';

            eleLink.style.display = 'none';

            // 触发图片onload是个异步过程，因此，需要在回调中处理

            callback = function () {

                eleLink.href = canvas.toDataURL();

                // 触发点击

                document.body.appendChild(eleLink);

                eleLink.click();

                // 然后移除

                document.body.removeChild(eleLink);

            };

            // dom变图片

            this.dom2Svg();

        }

    };

    return exports;

})();

// 实例页面的交互代码

var button = document.getElementById('down');

// 点击并下载图片

button.addEventListener('click', function (event) {

    var eleTarget = document.getElementById("main");

    if (eleTarget !== this) {

        domToImg.dom = eleTarget;

        domToImg.download();

    }

});

</script>

</html>

中途问题：

canvas转png时候得到的背景总是黑色的，听说转png时候是透明背景，jpeg是黑色背景，在toDataURL()中指定转换的类型

解决方案：

//白色背景

        context.fillStyle = '#fff';

        context.fillRect(0, 0, canvas.width, canvas.height);

基本上就这样了。

随机推荐

asp.net网站服务器搭建之从零开始
asp.net网站服务器搭建之从零开始一 IIS(Internet Information Services)安装: 1.选择"控制面板". 2.点"添加或删除程序 ...
pandas删除行删除列，增加行增加列
创建df: >>> df = pd.DataFrame(np.arange(16).reshape(4, 4), columns=list('ABCD'), index=list(' ...
Lab 1-1
LABS The purpose of the labs is to give you an opportunity to practice the skills taught in the chap ...
php二分法查找
//二分查找(数组里查找某个元素) function bin_sch($array, $low, $high, $k) { if ($low <= $high) { $mid = intval( ...
Linux中磁盘mbr分区——实践篇
Linux中磁盘mbr分区——实践篇 fdisk命令语法 fdisk(选项)(参数) 选项 -b <分区大小> 指定每个分区的大小 -l 列出分区表信息 -v 显示版本信息参数设备文 ...
堆排序 GPLT L2-012 关于堆的判断
题目链接:https://pintia.cn/problem-sets/994805046380707840/problems/994805064676261888 分析:这题看起来非常唬人,其实不难 ...
P4238 【模板】多项式求逆 ntt
题意:求多项式的逆题解:多项式最高次项叫度deg,假设我们对于多项式$A(x)*B(x)\equiv 1$,已知A,求B 假设度为n-1,\(A(x)*B(x)\equiv 1(mod x^{\ ...
sql百万级查询优化（转）
< 数据库技术内幕 > 处理百万级以上的数据提高查询速度的方法: 1.应尽量避免在 where 子句中使用!=或<>操作符,否则将引擎放弃使用索引而进行全表扫描. 2.对查询进 ...
Java虚拟机JVM简单理解
Java虚拟机JVM的作用: Java源文件(.java)通过编译器编译成.class文件,.class文件通过JVM中的解释器解释成特定机器上的机器代码,从而实现Java语言的跨平台. JVM的体系 ...
创建属性Attribute
XmlDocument xmlDoc = new XmlDocument(); xmlDoc.Load(xmlPath); var root = xmlDoc.DocumentElement;//取到 ...

实现html转png

随机推荐

热门专题