前段时间因为需求需要用到截图功能,一番调研后了解到html2canvas和dom-to-image可以实现截图功能。原理都是获取到dom元素,将dom绘制成canvas,然后转成图片。刚开始用的是html2canvas插件,后面因为html2vancas没法更改生成图片的样式,果断放弃了选择了dom-to-image插件。所以说对这两款插件还是有一定的了解,现在来说下个人对这两款插件的优缺点!
html2canvas的优点:
1.生成的图片非常清晰,即使放大数倍也很清晰。
html2canvas的缺点:
1.无法对图片进行样式设置,就是说布局是什么样子的,生成的图片就是什么样的
dom-to-image的优点:
1.可以对图片进行样式设置,比如添加背景色,padding
dom-to-image的缺点:
1.图片相比html2canvas,放大数倍后模糊
2.经测试,dom中含有伪类元素的话,生成的图片伪类元素的样式将会丢失。
3.只能生成可见元素的dom(可以用dom-to-image的升级版本dom-to-image-more解决)