html2canvas 實現純JS網頁截圖簡單例子

代碼庫地址： https://github.com/niklasvh/html2canvas

自己修改其中的 test.js （主要是其中的一些庫的路徑） 把test.js external文件夾 src文件夾 放在同一目錄下 

var h2cSelector, h2cOptions;
(function(document, window) {
    var scrStart = '<script type="text/javascript" src="', scrEnd = '"></script>';
    document.write(scrStart + 'external/jquery-1.6.2.js' + scrEnd);
    var html2canvas = ['Core', 'Generate', 'Parse', 'Preload', 'Queue', 'Renderer', 'Util', 'renderers/Canvas',  'plugins/jquery.plugin.html2canvas'], i;
    for (i = 0; i < html2canvas.length; ++i) {
        document.write(scrStart + 'src/' + html2canvas[i] + '.js' + scrEnd);
    }
    window.onload = function() {
        h2cSelector = [document.body];

        if (window.setUp) {
            window.setUp();
        }

        
    };
}(document, window));

function screenShot()
{
    setTimeout(function() {
            $(h2cSelector).html2canvas($.extend({
                flashcanvas: "external/flashcanvas.min.js",
                logging: true,
                profile: true,
                useCORS: true,
                onrendered:function(canvas )
                {
                    var screenshot;
                    screenshot = canvas.toDataURL( "image/png" );
                    console.info(screenshot);
                }
            }, h2cOptions));
        }, 100);
}

 

在主頁中包含 test.js 然后調用 screenshot 函數就可以在控制台看到圖片了，該數據可以上傳至服務器。