实现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);
基本上就这样了。
随机推荐
- English trip V1 - B 23. Nosy People 爱管闲事的人 Teacher:Parice Key: Be + Ving
In this lesson you will learn to talk about what happened. 谈论发生什么? 课上内容(Lesson) Nosy 好管闲事Noise 噪声 ...
- Destructuring Assignment in JS(解构assignment in js)
Destructuring Assignment In JavaScript 更省事,代码显得也清楚. Arrays 传统的声明赋值: let johnDoe = ["John", ...
- 统计数组中各个元素出现的次数，元素取值范围为：1到N
问题描述: * 给定一个整数数组a,长度为N,元素取值范围为[1,N]. * 统计各个元素出现的次数,要求时间复杂度为O(N),空间复杂度为O(1). * 可以改变原来数组结构. 思路: * 从第 ...
- 『MXNet』第八弹_数据处理API_下_Image IO专题
想学习MXNet的同学建议看一看这位博主的博客,受益良多. 在本节中,我们将学习如何在MXNet中预处理和加载图像数据. 在MXNet中加载图像数据有4种方式. 使用 mx.image.imdecod ...
- 创建springboot的聚合工程（二）
前篇已经成功创建了springboot的聚合工程并成功访问,下面就要开始子工程木块之间的调用: springboot项目的特点,一个工程下面的类必须要放在启动类下面的子目录下面,否则,启动的时候会报错 ...
- ubuntu计划任务的编写
1,首先,我编写的计划任务是在ubunut系统上的.首先我们来认识一下每一个 * 这样子的符号代表什么意思吧! * * * * * 从左到右: 第1列表示分钟1-59 每分钟用*或者 */1表 ...
- CRS添加、删除节点
一.如何删除一个节点: 1.1 在存活的节点上操作,使用dbca删除DB实例 1.2 清除ASM实例 在存活的节点上做如下操作 1.2.1 停止ASM实例 export ORACLE_HOM ...
- ReactiveCocoa入门教程--第二部分
翻译自:http://www.raywenderlich.com/62796/reactivecocoa-tutorial-pt2 ReactiveCocoa 是一个框架,它允许你在你的iOS程序中使 ...
- 【转】SQLServer汉字转全拼音函数
USE Test go IF OBJECT_ID('Fn_GetQuanPin','Fn') IS NOT NULL DROP FUNCTION fn_GetQuanPin go create fun ...
- npm 安装nodesass 或者包含nodesass的脚手架工具报错问题
由于最近vue转angular 但是angular版本太多了,好多项目是angularv4 有的是v5 近日angular又发布了v6,依赖的东西好多不一样,结果npm install 时候,总是出现 ...