通过javascript库dom-to-image.js插件可以将html5页面内容生成图片并下载到本地
将html5页面的内容保存成图片下载到本地，通过javascript库dom-to-image.js插件可以将html5页面内容生成图片。
需要注意的是目标页面上有远程图片时在生成的时候会不展示远程图片部分。
必须放到项目中或者服务虚拟目录中。
只需要引入dom-to-image.js即可（上一篇文章提到的html2canvas.js一起整理期中）
示例demo.html源码：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>js库html页面生成图片并下载之dom-to-image.js插件-越加网</title>
<!-- 设置缩放 -->
<meta name="viewport" content="minimal-ui,width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<style>
html, body{font-size:14px;color:#333;
font-family: -apple-system,SF UI Text,Arial,PingFang SC,Hiragino Sans GB,Microsoft YaHei,WenQuanYi Micro Hei,sans-serif;
font:inherit;font-weight:inherit;-webkit-tap-highlight-color:rgba(0,0,0,0);tap-highlight-highlight-rgba(0,0,0,0);}
*{margin:0;padding:0;border:0;outline:0;}
html,body,form,fieldset,p,div,h1,h2,h3,h4,h5,h6{-webkit-text-size-adjust:none;}
a{text-decoration:none;border:0px;color:#333;-webkit-touch-callout:none;}
em,i{font-style:normal;}
body{margin:0 auto;background:#F3F5F7;}
li{list-style:none;}
.contentBox{background:#fff;}
.content{border:2px solid red;margin-bottom:50px;}
.header{font-size:20px;text-align:left;padding:10px 10px;color:#e67549;line-height:60px;background:#fff;}
.note-list{overflow:hidden;margin: 0px 10px 0px 10px;}
.note-list li{border-top:1px solid #ddd;padding:25px 0 25px 0;min-height:100px;}
.note-list li:last-child{border-bottom:1px solid #ddd;}
.note-list li .wrap-img{float:left;display:inline-block;width:120px;height:120px;margin-right:20px;}
.note-list li .wrap-img img{width:120px;height:100px;}
.note-list li .title{font-size:18px;color:#333;font-weight:700;padding-left:20px;text-align:right;}
.note-list li .content-txt{}
.note-list li .abstract{font-size:14px;color:#888;font-weight:400;margin-top:5px;line-height:25px;padding-left:20px;}
.note-list li .author{font-size:12px;color:#666;margin-top:5px;padding-left:20px;}
.note-list li .author a{font-size:12px;color:#666;}
.note-list li .author:hover a{color:#333;}
.download_btn,.download_btn2{margin:auto auto 50px auto;width:200px;border:1px solid #ccc;padding:5px 10px;text-align:center;font-size:14px;}
</style>
</head>
<body>
<p class="advert">
轮播图<br>其他内容<br>轮播图<br>其他内容<br>
</p>
<!--contentBox为需要生成图片的页面内容-->
<div class="content">
<div class="contentBox">
<div class="header">越加网</div>
<ul class="note-list">
<li>
<a href="https://www.yj521.com/article/112.html" class="wrap-img" >
<img src="img/1597721064698700.jpeg" alt="前端csv2arr.js库表格execl文件数据解析">
</a>
<div class="content-txt">
<a href="https://www.yj521.com/article/112.html" class="title" >前端csv2arr.js库表格execl文件数据解析</a>
<p class="abstract"><a href="https://www.yj521.com/article/112.html">前端csv2arr.js库可以将execl表格文件数据转换成2D阵列模式，它可自动检测文件编码，进行数据传输时可以减轻服务器压力。</a></p>
<a href="https://www.yj521.com/article/112.html"><div class="author">2020-08-19 09:21:12</div></a>
</div>
</li>
<li>
<a href="https://www.yj521.com/article/111.html" class="wrap-img" >
<img src="img/1597646146726327.jpeg" alt="js两张多图片合成一张图片简单示例">
</a>
<div class="content-txt">
<a href="https://www.yj521.com/article/111.html" class="title" >js两张多图片合成一张图片简单示例</a>
<p class="abstract"><a href="https://www.yj521.com/article/111.html">纯JavaScript两张、多图片合成一张图片简单示例</a></p>
<a href="https://www.yj521.com/article/111.html"><div class="author">2020-08-18 09:24:23</div></a>
</div>
</li>
<li>
<a href="https://www.yj521.com/article/110.html" class="wrap-img" >
<img src="img/1595471467562332.jpeg" alt="php计算程序运行时间以及程序占用内存">
</a>
<div class="content-txt">
<a href="https://www.yj521.com/article/110.html" class="title" >php计算程序运行时间以及程序占用内存</a>
<p class="abstract"><a href="https://www.yj521.com/article/110.html">php中通过microtime()函数和memory_get_usage()函数应用可以计算业务逻辑程序运行时间和系统分配的内存大小。</a></p>
<a href="https://www.yj521.com/article/110.html"><div class="author">2020-07-23 09:24:03</div></a>
</div>
</li>
<li><a href="https://www.yj521.com/article/109.html" class="wrap-img" >
<img src="img/1595386542498125.jpeg" alt="php数组、字符串写入php文件中">
</a>
<div class="content-txt">
<a href="https://www.yj521.com/article/109.html" class="title" >php数组、字符串写入php文件中</a>
<p class="abstract"><a href="https://www.yj521.com/article/109.html">php数组、字符串写入php文件中，可以作为临时数据存储，以及配置文件内容更新等</a></p>
<a href="https://www.yj521.com/article/109.html"><div class="author">2020-07-22 10:05:00</div></a>
</div>
</li><li><a href="https://www.yj521.com/article/108.html" class="wrap-img" ><img src="img/1595004156209728.jpeg" alt="PHP日期时间戳互转日期时间差计算日周月年"></a><div class="content-txt">
<a href="https://www.yj521.com/article/108.html" class="title" >PHP日期时间戳互转日期时间差计算日周月年</a>
<p class="abstract"><a href="https://www.yj521.com/article/108.html">PHP中日期和时间戳互转，两时间段相差天数，取前几天和未来几天方式，获取13位时间戳等</a></p>
<a href="https://www.yj521.com/article/108.html"><div class="author">2020-07-18 09:24:50</div></a>
</div>
</li>
<li>
<a href="https://www.yj521.com/article/107.html" class="wrap-img" >
<img src="img/1594911485898637.jpeg" alt="JavaScript中substring() 方法截取字符串详解">
</a>
<div class="content-txt">
<a href="https://www.yj521.com/article/107.html" class="title" >JavaScript中substring() 方法截取字符串详解</a>
<p class="abstract"><a href="https://www.yj521.com/article/107.html">JavaScript中字符串截取substring() 方法试用详解</a></p>
<a href="https://www.yj521.com/article/107.html"><div class="author">2020-07-17 09:03:59</div></a>
</div>
</li>
<li>
<a href="https://www.yj521.com/article/106.html" class="wrap-img" >
<img src="img/1594532123071353.jpeg" alt="php变量给JavaScrip赋值0后if判断出现异常问题">
</a>
<div class="content-txt">
<a href="https://www.yj521.com/article/106.html" class="title" >php变量给JavaScrip赋值0后if判断出现异常问题</a>
<p class="abstract"><a href="https://www.yj521.com/article/106.html">php变量给js赋值0后在js中判断变量为0、'0'、''、null、false中需要注意的坑</a></p>
<a href="https://www.yj521.com/article/106.html"><div class="author">2020-07-14 09:00:08</div></a>
</div>
</li>
<li>
<a href="https://www.yj521.com/article/105.html" class="wrap-img" >
<img src="img/1594453141037107.jpeg" alt="H5页面监听浏览器关闭、刷新、跳转时提示之onbeforeunload和onunload事件">
</a>
<div class="content-txt">
<a href="https://www.yj521.com/article/105.html" class="title" >H5页面监听浏览器关闭、刷新、跳转时提示之onbeforeunload和onunload事件</a>
<p class="abstract"><a href="https://www.yj521.com/article/105.html">在H5页面中一些场景情况下防止表单数据丢失或者防止用户意外跳走页面，通过js进行监听提示用户，通过onbeforeunload事件和onunload事件实现。</a></p>
<a href="https://www.yj521.com/article/105.html"><div class="author">2020-07-13 09:12:23</div></a>
</div>
</li>
<li>
<a href="https://www.yj521.com/article/104.html" class="wrap-img" >
<img src="img/1594436823001244.jpeg" alt="JavaScript获取html中DOM节点Document对象">
</a>
<div class="content-txt">
<a href="https://www.yj521.com/article/104.html" class="title" >JavaScript获取html中DOM节点Document对象</a>
<p class="abstract"><a href="https://www.yj521.com/article/104.html">不依赖其他类库，纯js获取html中DOM节点Document对象的方法统计，包含简单示例，方便学习和查阅</a></p>
<a href="https://www.yj521.com/article/104.html"><div class="author">2020-07-12 07:15:50</div></a>
</div>
</li>
<li>
<a href="https://www.yj521.com/article/103.html" class="wrap-img" >
<img src="img/1594431728346386.jpeg" alt="用Photoshop制作墨水轮廓方法">
</a>
<div class="content-txt">
<a href="https://www.yj521.com/article/103.html" class="title" >用Photoshop制作墨水轮廓方法</a>
<p class="abstract"><a href="https://www.yj521.com/article/103.html">用Photoshop制作墨水轮廓方法，按照步骤，每一步都要细心，还是很容易做到的，做出来的效果也很美丽，快动手实验一下吧，加油奥</a></p>
<a href="https://www.yj521.com/article/103.html"><div class="author">2020-07-11 09:38:56</div></a>
</div>
</li>
</ul>
</div>
</div>
<!--这里按钮或者download_btn以外的内容不参与生成图片-->
<div class="download_btn">html2canvas1.0.0.js(保存图片)</div>
<div class="download_btn2">dom-to-image.js(保存图片)</div>
<script src="html2canvas1.0.0.js"></script>
<script src="dom-to-image.js"></script>
<script type="text/javascript">
/**
* html2canvas1.0.0.js(保存图片)
*/
var download = document.getElementsByClassName('download_btn');
download[0].onclick = function(){
var _canvas = document.querySelector('.contentBox'); // 需要生成图片的内容盒子
var w = parseInt(window.getComputedStyle(_canvas).width); // 需要生成页面的宽度
var h = parseInt(window.getComputedStyle(_canvas).height); // 需要生成页面的高度
alert('页面宽高：'+w+'×'+h);
// 头部不需要的高度
var topOtherH = parseInt(window.getComputedStyle(document.querySelector('.advert')).height);
var x = 0;
var y = topOtherH;
// 创建画布并页面绘制成图片
html2canvas(document.querySelector(".contentBox"),{ // 指定容器盒子
width: w, // 生成图片的宽度
height: h, // 生成图片的高度
x: x, // 水平坐标起始位置
y: y, // 垂直坐标起始位置
}).then(function(canvas){
var imgSrc = canvas.toDataURL(); // 获取生成的图片base64数据
console.log(imgSrc);
downloadFile('越加网1.png',imgSrc); // 进行下载
});
};
/**
* dom-to-image.js(保存图片)
*/
var download2 = document.getElementsByClassName('download_btn2');
download2[0].onclick = function(){
//var node = document.getElementById('printOut');
var node = document.querySelector(".contentBox");
domtoimage.toPng(node).then(function (dataUrl) {
downloadFile('越加网2.png',dataUrl);
});
};
/**
* 下载
*/
function downloadFile(fileName, content) {
let aLink = document.createElement('a');
let blob = base64ToBlob(content); //new Blob([content]);
let evt = document.createEvent("HTMLEvents");
//initEvent 不加后两个参数在FF下会报错 事件类型，是否冒泡，是否阻止浏览器的默认行为
evt.initEvent("click", true, true);
aLink.download = fileName;
aLink.href = URL.createObjectURL(blob);
// aLink.dispatchEvent(evt);
//aLink.click()
aLink.dispatchEvent(new MouseEvent('click', {bubbles: true, cancelable: true, view: window}));//兼容火狐等
}
/**
* base64转blob
*/
function base64ToBlob(code) {
let parts = code.split(';base64,');
let contentType = parts[0].split(':')[1];
let raw = window.atob(parts[1]);
let rawLength = raw.length;
let uInt8Array = new Uint8Array(rawLength);
for (let i = 0; i < rawLength; ++i) {
uInt8Array[i] = raw.charCodeAt(i);
}
return new Blob([uInt8Array], {type: contentType});
}
</script>
</body>
</html>页面效果图：
点击保存图片时即可将红色框区域的内容生成图片并下载到本地。
完整示例包下载：
链接：https://pan.baidu.com/s/1KImXU0GdJ2njhD9x_2HQbw
提取码：i2u4
