使用js将html代码一键截成图片（canvas）

先上演示链接，demo
依赖：

1. jquery
2. html2canvas.js ====>官网github https://github.com/ni....，网络不好的，链接：传送门
   提取码：4fsc

$(function () {
        //id btn触发点击事件
        $("#btn").click(function () {
                        //将用canvas绘制的容器
            html2canvas($("#card-main").get(0)).then(function (canvas) {
                document.body.appendChild(canvas);
                var url = canvas.toDataURL();//图片地址
                var timestamp = Date.parse(new Date());
                $("#downA").attr('href', url);
                //下载下来的图片名字
                $("#downA").attr('download', timestamp + '.png');
                $("#downA").get(0).click()
            });
        });
    })

解读：

html2canvas.js可将一个元素渲染为canvas，只需要调用html2canvas(element[, options]);
将目标元素生成为canvas元素后，调用canvas.toDataURL()方法，即生成图片的地址（base64格式，浏览器可以直接打开），然后通过a链接模拟点击下载即可