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 函数就可以在控制台看到图片了，该数据可以上传至服务器。