js导出页面div中的图

昨天需求没弄明白，结果白忙活了。原来需求是要整个div块导出图片，而不是单个的canvas标签。
今天又整了一天，试了十几种方法，终于在快下班的时候搞出来了。不然明天可能也搞不出了。
虽然原理没弄大懂，不过东西是出来了- -
在这里面用到了html2canvas这个小插件，百度一下就搜的到。
上代码

#关于js部分的
document.querySelector(".countImageExport").onclick = function(){
        var dom = document.querySelector("#alarmCountContent");
        //then()方法是异步执行就是当.then()前的方法执行完后再执行then()内部的程序这样就避免了，数据没获取到等的问题
        html2canvas(dom).then(function(canvas) {
            var image = canvas.toDataURL("image/png");
            image = image.replace("image/png",'image/octet-stream');

            /**
             * 在本地进行文件保存
             * @param  {String} data     要保存到本地的图片数据
             * @param  {String} filename 文件名
             */
            var saveFile = function(data, filename){
                var save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');
                save_link.href = data;
                save_link.download = filename;

                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);
            };

            // 下载后的问题名
            var filename = '年龄.png';
            // download
            saveFile(image,filename);
        });
    }

原帖链接：导出页面div中的图

虽然没什么参考意义，也贴几个无效的方法，代码不全，主要是js部分的。

第一种方法

$(function(){
    print();
});
function print() {
    html2canvas($("#ageyear"), {
        onrendered: function (canvas) {
            $('#down_button').attr('href', canvas.toDataURL());
            $('#down_button').attr('download', 'myjobdeer.png');
        }
    });
}

第二种方法

function takeScreenshot() {
  console.log('test');
    html2canvas(document.getElementById('age'), {
        onrendered: function(canvas) {
        Canvas2Image.saveAsPNG(canvas,300,200);
        },
      // width: 300,
      // height: 300
    });
}

第三种方法

$(document).ready( function(){
            $(".button").on("click", function(event) {
                    event.preventDefault();
                    html2canvas(document.getElementById("age"), {
                    allowTaint: true,
                    taintTest: false,
                    onrendered: function(canvas) {
                        canvas.id = "mycanvas";
                        //生成base64图片数据
                        var imgUrl = canvas.toDataURL("image/png");
                        var newImg = document.createElement("img");
                        newImg.src =  dataUrl;
                        document.body.appendChild(newImg);
                    }
                });
            });
});

第四种方法

$("#btn_screen").on("click", function() {
                html2canvas($("#ageyear"), {
                    onrendered: function(canvas) {
                        var url = canvas.toDataURL();
                        $("#img").attr("src", url);
                        $("#Down").attr("href", url);

                    }
                });
            });