实现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);

基本上就这样了。

随机推荐

批量显示QC结果的利器(转)
作者:greenhillman MultiQC homepage: http://multiqc.info功能:把多个测序结果的qc结果整合成一个报告.支持fastqc.trimmomatic.bow ...
No address associated with hostname
java.net.UnknownHostException: Unable to resolve host "www.baidu.com": No address associat ...
20170912多线程Python爬取图片
import threading #导入线程 from urllib import request #导入网页请求模块 import re #导入正则表达式模块 import os # 引入模块 fr ...
2015-2016 ACM-ICPC, NEERC, Moscow Subregional Contest J - Jealousy
题意:有n张照片,每张照片上有一些妹子,要按照片顺序给妹纸安排男朋友,如果妹纸i安排的男朋友之前有女朋友,那么费用+wi,求总费用最小,和输出路径题解:费用流,先把照片天数建点i连i+1,流量k(最 ...
【Java】【1】List的几种排序写法
前言: 1,实现Comparator接口的类的对象作为sort的入参 2,在方法的局部使用局部类 3,基于第二种方法,局部类改为匿名类 4,使用lamdba表达式->这种形式 5,借助Compa ...
element中使用button会刷新一遍页面
会刷新: <el-form-item> <button @click="register('form')" class="submitBtn&qu ...
PAT 1011 World Cup Betting
1011 World Cup Betting (20 分) With the 2010 FIFA World Cup running, football fans the world over w ...
ECharts 报表事件联动系列四：柱状图，折线图，饼状图实现联动
代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" c ...
python安装MySQLdb(即mysql-Python)模块的一些问题
1.超时问题如果出现:ReadTimeoutError: HTTPSConnectionPool(host='pypi.python.org', port=443): Read timed out ...
SQLServer 2008以上误操作数据库恢复方法—日志尾部备份
原文出处:http://blog.csdn.net/dba_huangzj/article/details/8491327 问题: 经常看到有人误删数据,或者误操作,特别是update和delete的 ...

实现html转png

随机推荐

热门专题