html2canvas:动态生成微信分享海报的优质js库

释放双眼,带上耳机,听听看~!
html2canvas:动态生成微信分享海报的优质js库

如何把网页上的内容用javascript来实现截图?今天分享的html2canvas就可以。

html2canvas能用来做什么?

在微信项目中经常会遇到动态生成海报的需求,Web前端合成图片往往会使用canvas。canvas 虽然强大,但用来合成海报非常繁琐,一不小心就几百行代码了。而 html2canvas.js 是一款轻松地将HTML+CSS写成的布局直接转换成canvas,生成可保存分享的图片。

html2canvas:动态生成微信分享海报的优质js库
html2canvas.js官网截图

选择html2canvas的3个理由

  • 兼容现代浏览器,手机项目可放心大胆使用;
  • 官网文档清晰简单,用法简单支持npm/yarn和cdn引入,有充足的代码例子;
  • 支持部分常用的CSS属性,配合图片使用几乎能满足所有动态生成海报的需求。

开发使用感受

这是一个把HTML的DOM结构根据所支持的CSS样式生成 canvas 的js开源库,CSS的写法千变万化,不同的布局有很多不同的写法,因此 html2canva s是不能100%还原网页的样式,因此不用用于像电脑屏幕截图这样的需求中。

html2canvas:动态生成微信分享海报的优质js库
官网关于支持css的说明

使用的时候要注意查看所支持的CSS属性,尽量使用这些属性来写布局,不支持的效果可以尝试用图片来实现。只要产品经理脑子在线,目测几乎没有什么海报需求是实现不了的。

官网是英文的,写得很专业,谷歌翻译阅读无压力。

官网地址+项目地址

本站所有文章,如无特殊说明或标注,均为本站原创发布;任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台;如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。

《关于网站内隐藏内容的介绍及理由》

如果下载链接失效的话,请劳烦您在评论区反馈,以便我们及时处理。

给TA打赏
共{{data.count}}人
人已打赏
JavaScript

Vue Core Video Player:轻量精致的web视频播放免费开源组件

2021-8-26 15:05:48

JavaScript

Video.js:专为HTML5构建的网络视频播放器

2021-8-26 15:27:06

软糖工作室微信公众号
0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
有新私信 私信列表
搜索