使用「 html2canvas 」实现浏览器截图并下载

以前我们只能通过其他的截图工具来截取图像。记得08年时为了做网站导航里边的截图，还写过一个windows程序，自动访问并截图，只能机器开着时使用。

现在浏览器的功能已经越来越强，随着H5的逐渐普及，浏览器本身就可以截图啦。这里给大家隆重推荐—— html2canvas 。

它的原理是将Dom节点在Canvas里边画出来。虽然很方便，但有以下限制：

• 不支持iframe
• 不支持跨域图片
• 不能在浏览器插件中使用
• 部分浏览器上不支持SVG图片
• 不支持Flash
• 不支持古代浏览器和IE，如果你想确认是否支持某个浏览器，可以用它访问 http://deerface.sinaapp.com/ 试试 :)

如果你有以上需求，那么建议使用 Phantomjs 这种可以以命令行方式运行在服务器上的headless的浏览器来做。

如果你的需求比较简单，那么html2canvas 还是很好用的。

调用方法非常简单，直接引用js，然后如下调用即可：

html2canvas( $('#theface') , 
{
    onrendered: function(canvas) 
    {
            $('#down_button').attr( 'href' , canvas.toDataURL() ) ;
            $('#down_button').attr( 'download' , 'myjobdeer.png' ) ;
            $('#down_button').css('display','inline-block');

    }
}); 

第一个参数是要截图的Dom对象，第二个参数时渲染完成后回调的canvas对象。

我今天用它做JobDeer换装秀时遇到两个细节问题：

• 官网上要从release页面下载最新的，不要Github直接下Zip，不然会有class name不规则时无法使用的bug。
• 官网没有讲如何将canvas下载下来，上边的代码我已经给出例子了，用toDataURL()，然后页面转向或者set给一个链接。这样点击的时候就能下载了。

下边是做好的Demo，点「 眼镜 」之类的方块可以换装，点「 生成头像 」时会调用html2canvas，然后把链接附到「 下载头像 」上，这样点「 下载头像 」就可以下载到本地了。

JobDeer换装秀地址： http://deerface.sinaapp.com/