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

基本上就这样了。

随机推荐

LOJ6072苹果树
虽然结合了很多算法,但是一步一步地推一下还不算太难的一道题. 首先考虑枚举枚举有用的苹果的集合,然后去算生成树个数. 先考虑怎么计算生成树个数. 发现可以使用matrix-tree. 所有有用点可以和 ...
Digital Deletions HDU - 1404
Digital deletions is a two-player game. The rule of the game is as following. Begin by writing down ...
树莓派 CSI摄像头 No data received from sensor. Check all connections, including the Sunny one on the camera board
不知道为什么摄像头在包里放了两天旧坏了,中间完全没用过摄像头的功能,查了资料,原因大概有两种 1)sunny烧了 2)试摄像头传感器坏了这两天没有插拔过摄像头,可能是树莓派漏电了,也可能是它被压坏了 ...
New task CodeForces - 788E (线段树优化dp)
比较套路的一个题, 对每个数维护一颗线段树来转移就好了. #include <iostream> #include <algorithm> #include <cstdi ...
『TensorFlow』SSD源码学习_其四：数据介绍及TFR文件生成
Fork版本项目地址:SSD 一.数据格式介绍数据文件夹命名为VOC2012,内部有5个子文件夹,如下, 我们的检测任务中使用JPEGImages文件夹和Annotations文件夹. JPEGIm ...
通过selenium控制浏览器滚动条
目的:通过selenium控制浏览器滚动条原理:通过 driver.execute_script()执行js代码,达到目的 driver.execute_script("window.sc ...
字符串加密解密（Base64）
var Base64 = { // private property _keyStr: "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwx ...
python-思路整理-虚拟环境
虚拟环境: 如需多个版本的django或其他框架开发代码时,就可以用虚拟环境 pip3 install virtualenv # 创建虚拟环境 virtualenv virtualenv env1 # ...
MapReduce(三)
MapReduce(三) MapReduce(三): 1.关于倒叙排序前10名 1)TreeMap根据key排序 2)TreeSet排序,传入一个对象,排序按照类中的compareTo方法排序 2.写 ...
Oracle Shared Pool之Library Cache
1. Shared Pool组成 Shared Pool由许多区间(Extent)组成,这些区间又由多个连续的内存块(Chunk)组成,这些内存块大小不一.从逻辑功能角度,Shared pool主要包 ...

实现html转png

随机推荐

热门专题