html2canvas网页截图导出为图片并用JS下载

html2canvas是一个相当不错的JavaScript类库，它使用了html5和css3的一些新功能特性，实现了在客户端对网页进行截图的功 能。html2canvas通过获取页面的DOM和元素的样式信息，并将其渲染成canvas图片，从而实现给页面截图的功能。

它不需要来自服务器任何渲染，整张图片都是在客户端浏览器创建。当浏览器不支持Canvas时，将采用Flashcanvas或 ExplorerCanvas技术代替实现。以下浏览器能够很好的支持该脚本：Firefox 3.5+, Google Chrome, Opera新的版本, IE9以上的浏览器。

因为每个浏览器渲染页面的方式都不尽相同，所以生成的图片也不太一样。虽然它目前还是处理开发阶段，但还是很值得期待的。

这个插件依赖于jQuery插件，建议使用最新版的。

兼容性
html2canvas能在以下的浏览器中完美的运行。
Firefox 3.5+
Chrome
Opera
IE9

通过html2canvas方法调用插件，该方法接受两个参数，第一个为要生成截图的DOM元素，第二个参数为插件的配置

html2canvas(document.body, {
    allowTaint: true,
    taintTest: false,
    onrendered: function(canvas) {
        canvas.id = "mycanvas";
        //document.body.appendChild(canvas);
        //生成base64图片数据
        var dataUrl = canvas.toDataURL();
        var newImg = document.createElement("img");
        newImg.src =  dataUrl;
        document.body.appendChild(newImg);
    }
});

通过一个回调函数来处理获取到的截图。

图片跨域问题
在网页的图片中，如果有跨域图片，调用toDataURL的时候会出错
SecurityError: The operation is insecure.
解决方法是在跨域的服务器上设置header设置为允许跨域请求
access-control-allow-origin: * access-control-allow-credentials: true

1、从canvas中直接提取图片元数据
// 图片导出为 png 格式
var type = 'png';
var imgData = canvas.toDataURL(type);
上面的代码得到的数据格式为：data:image/png;base64,.....
2、将mime-type改为image/octet-stream，强制让浏览器直接download

/**
 * 获取mimeType
 * @param  {String} type the old mime-type
 * @return the new mime-type
 */
var _fixType = function(type) {
    type = type.toLowerCase().replace(/jpg/i, 'jpeg');
    var r = type.match(/png|jpeg|bmp|gif/)[0];
    return 'image/' + r;
};
   
// 加工image data，替换mime type
imgData = imgData.replace(_fixType(type),'image/octet-stream');

上面这个代码得到的数据格式为：data:image/octet-stream;base64,.....
3、图片download到本地

/**
 * 在本地进行文件保存
 * @param  {String} data     要保存到本地的图片数据
 * @param  {String} filename 文件名
 */
var saveFile = function(data, filename){
    var save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');
    save_link.href = data;
    save_link.download = filename;
   
    var event = document.createEvent('MouseEvents');
    event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
    save_link.dispatchEvent(event);
};
   
// 下载后的问题名
var filename = 'baidufe_' + (new Date()).getTime() + '.' + type;
// download
saveFile(imgData,filename);