以前我们只能通过其他的截图工具来截取图像。记得08年时为了做网站导航里边的截图,还写过一个windows程序,自动访问并截图,只能机器开着时使用。
现在浏览器的功能已经越来越强,随着H5的逐渐普及,浏览器本身就可以截图啦。这里给大家隆重推荐—— html2canvas 。
它的原理是将Dom节点在Canvas里边画出来。虽然很方便,但有以下限制:
如果你有以上需求,那么建议使用 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换装秀时遇到两个细节问题:
下边是做好的Demo,点「 眼镜 」之类的方块可以换装,点「 生成头像 」时会调用html2canvas,然后把链接附到「 下载头像 」上,这样点「 下载头像 」就可以下载到本地了。
JobDeer换装秀地址: http://deerface.sinaapp.com/
联系客服