![34cad4f924c47137bf6992a118117834.png](https://i-blog.csdnimg.cn/blog_migrate/47757b31d1187b522eafb90444d3a7af.jpeg)
如何把网页上的内容用javascript来实现截图?今天分享的html2canvas就可以。
介绍
在微信项目中经常会遇到动态生成海报的需求,Web前端合成图片往往会使用canvas。canvas虽然强大,但用来合成海报非常繁琐,一不小心就几百行代码了。而html2canvas.js是一款轻松地将HTML+CSS写成的布局直接转换成canvas,生成可保存分享的图片。
![21358c7eee1e54e32e875855590d4aec.png](https://i-blog.csdnimg.cn/blog_migrate/afee1a6afb0bd26693a65c08db307258.jpeg)
特点
- 兼容现代浏览器,手机项目可放心大胆使用;
- 官网文档清晰简单,用法简单支持npm/yarn和cdn引入,有充足的代码例子;
- 支持部分常用的CSS属性,配合图片使用几乎能满足所有动态生成海报的需求。
使用体验
这是一个把HTML的DOM结构根据所支持的CSS样式生成canvas的js开源库,CSS的写法千变万化,不同的布局有很多不同的写法,因此html2canvas是不能100%还原网页的样式,因此不用用于像电脑屏幕截图这样的需求中。
![bfdc9581e7ccc6f01c10a5f814c2f7dc.png](https://i-blog.csdnimg.cn/blog_migrate/864cbb618e0f1ec41b8bc40469a6b84e.jpeg)
使用的时候要注意查看所支持的CSS属性,尽量使用这些属性来写布局,不支持的效果可以尝试用图片来实现。只要产品经理脑子在线,目测几乎没有什么海报需求是实现不了的。
官网是英文的,写得很专业,谷歌翻译阅读无压力。
免费使用说明
html2canvas 由开发者 Niklas von Hertzen 创建,基于MIT许可开源,可以免费使用在任何项目。
相关网址
http://html2canvas.hertzen.com/
本专栏持续分享高质量的免费开源、免费商用的资源,欢迎关注。