html2canvas如何在元素隐藏的状况下生成截图

html2canvas官网地址：http://html2canvas.hertzen.com/

github地址：https://github.com/niklasvh/html2canvas/

从官网能够看出它的使用方法很容易：

项目中的需求是须要将2张图片（1背景图+2生成的二维码）和1段文字（3店铺的名称）总体合成一张图片，看下面的图片应该有助于理解：

 动态图以下：

 

咱们能够看出，在使用过程当中，须要合成图片的那段代码是隐藏的。这时，有个问题就是隐藏的代码是没法生成截图的。最开始是想从js下手，自身能力有限，作不到让它在隐藏的状况下截图。转念能够从css下手。咱们要达到的效果无非就是让这一块区域看不见，脱离文档流，不占空间。我相信经过我这样描述，你们可能知道该如何作了。

就是咱们把那一块须要生成截图的区域样式设置为{position:fixed;opacity:0;}，而后在生成截图以后把这段代码给移除掉。为了用户体验更好，咱们能够在生成图片的时候中间加一个过渡的动画。等图片生成完以后将过渡动画移除掉。大概思路就是这样子了，若是个人文字描述仍是让你一脸懵逼的话，直接看下面的截图：

总体截图及说明以下：

 

HTML截图以下：

 

主要CSS截图以下：

 

主要js代码以下：

 

把a连接加一个download的属性就能够实现点击直接下载该图片了。

 

 

给能看到结尾的你点个赞。在写的过程当中，感受都不知道本身要如何把事情给描述清楚明白。。。要说的就这些了~但愿能帮到各位看官~~若有疑问欢迎留言，如有更好的方法，但愿各位不吝赐教哇~~