释放双眼，带上耳机，听听看~！
如何把网页上的内容用javascript来实现截图？今天分享的html2canvas就可以。
html2canvas能用来做什么？
在微信项目中经常会遇到动态生成海报的需求，Web前端合成图片往往会使用canvas。canvas 虽然强大，但用来合成海报非常繁琐，一不小心就几百行代码了。而 html2canvas.js 是一款轻松地将HTML+CSS写成的布局直接转换成canvas，生成可保存分享的图片。
选择html2canvas的3个理由
- 兼容现代浏览器，手机项目可放心大胆使用；
- 官网文档清晰简单，用法简单支持npm/yarn和cdn引入，有充足的代码例子；
- 支持部分常用的CSS属性，配合图片使用几乎能满足所有动态生成海报的需求。
开发使用感受
这是一个把HTML的DOM结构根据所支持的CSS样式生成 canvas 的js开源库，CSS的写法千变万化，不同的布局有很多不同的写法，因此 html2canva s是不能100%还原网页的样式，因此不用用于像电脑屏幕截图这样的需求中。
使用的时候要注意查看所支持的CSS属性，尽量使用这些属性来写布局，不支持的效果可以尝试用图片来实现。只要产品经理脑子在线，目测几乎没有什么海报需求是实现不了的。
官网是英文的，写得很专业，谷歌翻译阅读无压力。
官网地址+项目地址
本站所有文章，如无特殊说明或标注，均为本站原创发布；任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台；如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。
如果下载链接失效的话，请劳烦您在评论区反馈，以便我们及时处理。
