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