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