感恩节海报视频教程
旅途中的风景视频教程
一、案例效果
二、应用场景
文末附件下载素材，非商用，仅供学习使用。
如果要将H5页面上的多个元素，包括图片、幻灯、序列帧、段落组件合成在一张图片上，并保存下来，这就需要 “截屏” 组件了。
有了“截屏”组件，就可以将H5页面内容合成图片，用于：
制作个性化邀请函
单页海报
游戏获奖证书
照片拼图......
将 “截屏” 图片分享，相比较于缩略图配合文案的形式，也更直观、内容也更丰富。
三、素材准备
1. 使用【截屏组件】合成元素后，【截屏组件】自身不能显示合成的内容，必须借助另外的一张图，来显示合成内容，后面我们称这个图片为替换图。为了保证合成后的内容能刚刚好放在替换图里，不会变形，需要合成图片的尺寸比例跟截屏区域保持一致，一般截屏组件默认的截屏区域是画布内框尺寸。
2. 参与截屏的内容一定要有一个底图，这个底图建议设计尺寸为：844x1496px（即可以铺满整个白色出血区的大小）
如果对截屏区域不作调整，最终合成好的图片取画布内框尺寸：375x603px
四、组件用法
基本用法
1. 点击截屏组件，添加到页面中
2. 在页面中放好图片、段落等需要参与截屏的组件，这些都是需要放到合成图片中的。
3. 在逻辑小面板选中截屏组件，在右侧面板中选择黄色加号，将页面内图片／段落组件添加到 “截屏” 组件中：
4. 添加一些提示用户去截屏的提示语和按钮（这个可以根据自己的需要来）
5. 案例里，是给【完成】按钮的上方添加了一个透明的【热区】组件，点击【热区】时触发截屏。
上文中我们提到，截屏的内容不能自己显示，必须借助另外的一张图，来显示合成内容，我们称这个图片为替换图。（替换图的内容不重要，在截屏后都会被替换成我们想要截屏的内容，但仍然推荐用一张透明的空图片作为替换图。）
在截屏触发器的设置面板中，我们在【截屏组件关联到】的设置中，将准备好的替换图添加到这里来。这样，我们截屏的内容便会替换到这张替换图上面去了。
6. 截屏替换有两种场景，分别为【在当前页显示截屏图片】，与【在其他页面显示截屏图片】。根据使用场景的不同，我们在截屏触发器中需要设置的截屏图片关联内容也有所不同，我们在此一一进行介绍。
（A）在当前页显示截屏图片。详细教程请戳此处。
在点击了【完成】按钮后，我们会将页面中的内容进行截屏，并在当前页显示。为了让截屏后的图片（上文的替换图）可以不被任何元素遮挡，我们通常要将截屏后的图片放在所有图层的最上方，并在右侧属性面板处勾选初始隐藏，直到截屏后显示。
完整步骤如下：添加需要截屏的元素——添加截屏后的替换图——让截屏替换图初始隐藏——添加截屏组件——将需要截屏的元素全部添加到截屏组件中——在【完成】按钮上设置点击时触发截屏操作——在截屏触发器上设置截屏图片关联到替换图上——在截屏触发器上设置截屏成功后显示替换图。
注意要点：
（1）截屏的替换图显示方式为【撑满】。
（2）默认截屏区域是画布内框，所以【替换图】尺寸比例可以不是375X603，但宽高比必须等比大小。否则截屏后可能会截屏内容变形。
如果截屏替换图需要可以在微信环境下长按保存到相册或转发分享，则要给替换图勾选【二维码可识别】（如下图所示）
（3）未防止在本页截屏成功后，由于背景杂乱导致看不清截屏内容，我们通常会在截屏成功后隐藏其他不必要的元素，或在其他不必要的元素上方、截屏替换图下方添加一张深色半透明的遮罩，来使截屏替换图清晰完整显示。
上图为截屏后的几种图片显示方式，仅供参考
（4）在页面中添加一个按钮（可以是自己设计的图片），给它设置触发器，点击时触发截屏；也可以用计时器触发截屏，不建议直接用页面触发器触发，防止有些素材未加载完毕去截屏会不成功。
（5）触发行为面板具体设置。截屏成功后触发元素显示【显示海报图片】，因为该图是初始隐藏的。
（6）合成后的图片如何保存下来？一定要给最终用来显示的图片组件（也就是那张用来替换的图片），勾选 “二维码识别”，这样才可以长按后弹出菜单进行保存或转发。
以上方式，可以满足当前页面截屏后海报显示，还有另外一种方式是截屏后的图片在其他页面显示，有需要的可以戳下方文字链接。
（B）在其他页显示截屏图片。详细教程请戳此处。
上文中的方法，将【截屏组件】关联给了本页所在的替换图上面，但如果我们不希望在本页显示截屏图片，而希望在其他页面显示截屏图片时，我们便不能再将截屏内容关联给本页的替换图了，而需要借助【全局变量】组件，将截屏内容关联给【全局变量】，到了其他页面后，再将全局变量中保存的截屏内容通过【替换资源文件】触发器替换给其他页面的替换图去呈现。详细使用方法如下：
完整步骤如下：在页面A添加需要截屏的元素——添加用于保存截屏内容的全局变量组件——将全局变量组件的类型设置为文本——添加截屏组件——将需要截屏的元素全部添加到截屏组件中——在【完成】按钮上设置点击时触发截屏操作——在截屏触发器上设置截屏图片关联到全局变量上——在截屏触发器上设置截屏成功后跳转到页面B——在页面B添加截屏后的替换图——在页面B的页面触发器上设置切换到当前页时执行【替换资源文件】——将刚刚的全局变量内容替换给页面B中的替换图——完成。
注意要点：
（1）截屏内容是字符串形式的一串网址，所以全局变量的字段类型需是文本，才可以将截屏内容存储。
（2）在页面B的页面触发器上设置替换资源文件的触发，将全局变量替换给本页的图片。
高级用法
1.指定截屏区域进行截屏
（1）通过给截屏组件设置截屏区域，可以截取页面中的指定区域，如图：
（2）需要注意一点，用于显示截屏区域画面的图片，其尺寸比例要跟截屏区域尺寸比例一致(防止显示变形)，如图：
3.生成文件选项，默认不勾选，截屏在H5作品中立即生成，时间更短。
如果需要将截屏的图片保存到数据库，需要勾选生成文件，且需要结合数据库的新建数据操作，后台单独新建数据表。《1.数据库（视频教程）【仅专业版以上版本可商用】》
4.截屏时包含所有可复制组件。该功能是针对DIY图片组件，复制后的组件也可以参与截屏使用的，如果页面中没有DIY图片组件可以不用勾选。DIY图片组件教程请戳此处。
5.图片样式参与截屏
（1）图片边框的线宽、颜色、圆角也将参与截屏 . 比如微信头像参与截屏时，其头像图片边框的线宽、颜色、圆角也能够截取，同时支持修改微信昵称的颜色样式 。
（2）截屏后的效果如图：
6.其他注意事项
（1）文字或者段落的样式不能被截屏保存，例如滤镜，阴影等效果，但是不会影响文字段落的基本布局。
常见问题补充：