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