（2）下载素材
html2canvas.min.js下载地址：
canvas2image.js下载地址：
base64.js下载地址：
（3）引入js
<script src="你的路径/html2canvas.min.js"></script> <script src="你的路径/canvas2image.js"></script> <script src="你的路径/toimg/base64.js"></script>
（4）放置按钮
<li><a id="btnSave">转换成图片</a></li>
（5）js代码，生成图片，并下载
<script>
/*生成canvas图形*/
// 获取按钮id
var btnSave = document.getElementById("btnSave");
// 获取内容id
var content = document.getElementById("content");
// 进行canvas生成
btnSave.onclick = function(){
html2canvas(content, {
onrendered: function(canvas) {
//添加属性
canvas.setAttribute(‘id‘,‘thecanvas‘);
//赋、读取属性值
document.getElementById(‘images‘).appendChild(canvas);
var oCanvas = document.getElementById("thecanvas");
/*自动保存为png*/
// 获取图片资源
var img_data1 = Canvas2Image.saveAsPNG(oCanvas, true).getAttribute(‘src‘);
var save_link = document.createElementNS(‘http://www.w3.org/1999/xhtml‘, ‘a‘);
save_link.href = img_data1;
save_link.download = "Name_Img";
/*下面的为原生的保存，不带格式名*/
var event = document.createEvent(‘MouseEvents‘);
event.initMouseEvent(‘click‘, true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
save_link.dispatchEvent(event);
}
});
}
</script>
（6）对js代码解析
content：为要生成图片区域的id。
Name_Img :下载图片的名称。
（7）将生成的图片隐藏起来，不做显示，在测试时可以显示。
<div id="images" style="display:none;"></div>
