html2canvas能用来做什么?

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

html2canvas.js官网截图

选择html2canvas的3个理由

 

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

开发使用感受

 

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

官网关于支持css的说明

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

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

开源许可说明

 

html2canvas 由开发者 Niklas von Hertzen 创建,基于MIT许可开源,可以免费使用在任何项目。

 

本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。

最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。 若排除这种情况,可在对应资源底部留言,或联络我们。

对于会员专享、整站源码、程序插件、网站模板、网页模版等类型的素材,文章内用于介绍的图片通常并不包含在对应可供下载素材包内。这些相关商业图片需另外购买,且本站不负责(也没有办法)找到出处。 同样地一些字体文件也是这种情况,但部分素材会在素材包内有一份字体下载链接清单。

如果您已经成功付款但是网站没有弹出成功提示,请联系站长提供付款信息为您处理

源码素材属于虚拟商品,具有可复制性,可传播性,一旦授予,不接受任何形式的退款、换货要求。请您在购买获取之前确认好 是您所需要的资源