如果要将H5页面上的内容生成图片保存下来，这就需要 “截屏” 组件了。大家可以先看一下案例Demo具体了解：

制作感恩节海报 （点击打开作品拷贝）

结合案例的视频教程>>画板截屏（感恩节海报H5）

截屏组件

有了“截屏”组件，就可以将H5页面内容合成图片，用于：

• 制作个性化邀请函

• 单页海报

• 游戏获奖证书

• 照片拼图......

将 “截屏” 图片分享，相比较于缩略图配合文案的形式，也更直观、内容也更丰富。

设置方法

1. 在页面中放好各种图片、段落组件，这些都是需要放到合成图片中的

2.  添加截屏组件

3.  将页面内图片／段落组件添加到 “截屏” 组件中：  

4.  添加一些提示用户操作的提示语和按钮（这个可以根据自己的需要来）

5. 案例里，是给 “完成” 添加了点击触发器，触发 “截屏”   来合成图片

特别提醒：

• 截屏合成的图片如何显示出来？

目前有两种常用方法（根据个人需求二选一）：

方法一：截屏后的图片不在当前页面显示（在其他页面显示）需要用全局变量

关键点：全局变量／要跳转的指定页面／在指定页面添加要替换的资源图片

全局变量的设置

a.上面教程使用了全局变量，触发截屏组件后，截图设置首先关联到全局变量，成功后触发页面跳转。

b.跳转到指定页面后，设置“页面触发器——切换到当前页时——执行替换资源”的触发行为。替换早已放置在该页面的一张图片， 用该图片把截图的内容显示出来。

----------------------------------   分割线   ----------------------------------

方法二：直接在当前页显示截图（不跳转页面，所以不使用全局变量）

关键点：截屏组件／一张要替换的图片（一定设置初始隐藏）

在页面中添加一个图片按钮，给它设置触发器，点击时触发截屏，截屏关联到要替换的图片（图片初始隐藏），截屏成功后触发——初始隐藏的图片显示。

这两种设置方式都可以，取决于具体的策划。

• 合成后的图片如何保存下来？

一定要给最终用来显示的图片组件（也就是那张用来替换的图片），勾选 “二维码识别”，这样才可以长按后弹出菜单进行保存或转发。

• 合成图片的尺寸规格

一定要有一个底图，这个底图建议设计尺寸为：740x1136px

最终合成好的图片取画布内框尺寸：640 x 960px 

延伸：指定截屏区域进行截屏

通过给截屏组件设置截屏区域，可以截取页面中的指定区域，如图：

需要注意一点，用于显示截屏区域画面的图片，其尺寸比例要跟截屏区域尺寸比例一致(防止显示变形)，如图：

生成文件选项，默认是不勾选

a.不勾选生成文件，截屏在H5作品中立即生成，不用将所有要截屏的元素上传到服务器处理，生成后再到H5作品中显示，缩短了这个步骤，截屏更快。

b.勾选“生成文件”选项，如果需要将截屏的图片文件保存到H5作品后台，需要下载、分享到朋友圈等的工作，就需勾选。

注：

图片边框的线宽、颜色、圆角也将参与截屏 . 比如微信头像参与截屏时，其头像图片边框的线宽、颜色、圆角也能够截取，同时支持修改微信昵称的颜色样式 .

截屏后的效果如图：

注：

1.截屏元素目前是段落、图片、幻灯组件、序列帧组件、微信头像组件（幻灯／序列帧截屏案例教程）。

截取的图片支持部分样式，如：图片边框的圆角、粗细、颜色。详细可戳链接了解（截屏组件优化公告）。

2.文字或者段落的样式不能被截屏保存，例如滤镜，阴影等效果，但是不会影响文字段落的基本布局。

3.微信拍照上传的照片后，用户对照片的调整也是不能被截屏保存的。