js -- 将HTML内容生成图片

html2canvas 能够实现在用户浏览器端直接对整个或部分页面进行截屏。

这个html2canvas脚本将当页面渲染成一个Canvas图片，通过读取DOM并将不同的样式应用到这些元素上实现。

将地图html渲染成图片

<script type="text/javascript" src="js/html2canvas.min.js"></script>
// 递增生成画布
function loadingMap() {
    var topicTop = $("#main-map").offset().top;
    // canvas
    html2canvas(document.getElementById('main-map'), {
        width: $("#main-map").width(),
        height: $("#main-map").height(),
        y: topicTop,
    }).then(function (canvas) {
        var data = canvas.toDataURL('image/jpeg');
        $(".map-canvas img").attr("src",data);
        ascending();
    });
}

js -- 将HTML内容生成图片

推荐阅读