视频教程：
《感恩节海报视频教程》
《旅途中的风景视频教程》
一、案例效果
二、应用场景
文末附件下载素材，非商用，仅供学习使用。
如果要将H5页面上的多个元素，包括图片、幻灯、序列帧、段落组件合成在一张图片上，并保存下来，这就需要 “截屏” 组件了。
有了“截屏”组件，就可以将H5页面内容合成图片，用于：
制作个性化邀请函
单页海报
游戏获奖证书
照片拼图......
将 “截屏” 图片分享，相比较于缩略图配合文案的形式，也更直观、内容也更丰富。
三、素材准备
1.因为截屏组件合成元素后，不能自己显示合成的内容，必须借助另外的一张图，来显示合成内容，后面我们称这个图片为替换图。为了保证合成后的内容能刚刚好放在替换图里，不会变形，需要合成图片的尺寸比例跟截屏区域保持一致，一般截屏组件默认的截屏区域是画布内框尺寸。
2.参与截屏的内容一定要有一个底图，这个底图建议设计尺寸为：844x1496px
如果对截屏区域不作调整，最终合成好的图片取画布内框尺寸：375x603px
四、组件用法
基本用法
1.点击截屏组件，添加到页面中
2. 在页面中放好图片、段落、组件，这些都是需要放到合成图片中的
3.在逻辑小面板选中截屏组件，将页面内图片／段落组件添加到 “截屏” 组件中：
4. 添加一些提示用户操作的提示语和按钮（这个可以根据自己的需要来）
5. 案例里，是给 “完成” 添加了点击触发器，触发 “截屏” 来合成图片
6.截屏的内容不能自己显示，需要另外再添加1张图片，我们称【显示海报图片】，用于显示截屏后的结果。添加后，该图片右侧面板勾选初始隐藏。
注意要点：
（1）显示截屏的图片显示方式为【撑满】。
（2）截屏区域默认截屏区域是画布内框，所以【显示海报图片】尺寸比例是375X603。
7.在页面中添加一个按钮（可以是自己设计的图片），给它设置触发器，点击时触发截屏；也可以用计时器触发截屏，不建议直接用页面触发器触发，防止有些素材未加载完毕去截屏会不成功。
8.触发行为面板具体设置。截屏成功后触发元素显示【显示海报图片】，因为该图是初始隐藏的。
9.合成后的图片如何保存下来？一定要给最终用来显示的图片组件（也就是那张用来替换的图片），勾选 “二维码识别”，这样才可以长按后弹出菜单进行保存或转发。
10.以上方式，可以满足当前页面截屏后海报显示，还有另外一种方式是截屏后的图片在其他页面显示，有需要的可以戳下方文字链接。
高级用法
1.指定截屏区域进行截屏
（1）通过给截屏组件设置截屏区域，可以截取页面中的指定区域，如图：
（2）需要注意一点，用于显示截屏区域画面的图片，其尺寸比例要跟截屏区域尺寸比例一致(防止显示变形)，如图：
3.生成文件选项，默认不勾选，截屏在H5作品中立即生成，时间更短。
4.图片样式参与截屏
（1）图片边框的线宽、颜色、圆角也将参与截屏 . 比如微信头像参与截屏时，其头像图片边框的线宽、颜色、圆角也能够截取，同时支持修改微信昵称的颜色样式 。
（2）截屏后的效果如图：
5.其他注意事项
（1）文字或者段落的样式不能被截屏保存，例如滤镜，阴影等效果，但是不会影响文字段落的基本布局。
常见问题补充：