一、案例效果
二、应用场景
将H5页面上的多个元素，包括图片、幻灯、序列帧、段落组件合成在一张图片上，长按图片并保存下来。
截屏的原理是把一些零散的组件元素：文字、图片等合称为一张PNG格式的图片。该图不能自己显示，必须通过替换资源借助另外的一张图来显示。
准备工作：
1、用于参与截屏的文字信息、大小图片，我们统称元素。
2、用于点击触发截屏的按钮（编辑器里有现成按钮组件）。
3、用于显示截屏的图片1张，尺寸不限，常见尺寸是422*748像素或375*603像素。
具体步骤
1、点击要截屏的元素，通常为图片、文字组件。
2、点击截屏组件，添加到页面中
3、在逻辑小面板选中截屏组件，在右侧面板中选择黄色加号，将页面内图片／段落组件添加到 “截屏” 组件中：
4、添加一个用于点击触发截屏的新文字按钮，去掉开关模式。
5、另外添加一张图用于显示截屏结果，命名为【显示海报】；尺寸调整我们默认为266*532PX；并勾选为初始隐藏，目的是一开始截屏的显示是看不到的，一般是在生成截屏这件事结束后，该图片再显示。
该尺寸其实不局限于该尺寸，后面我们补充说明显示图片的原则性尺寸规范。
6、点击按钮后将截屏显示出来。设置按钮点击时的触发行为——截屏。
补充：截屏的触发行为在这里
7、为了让截屏后的图片可以不被任何元素遮挡，要将【显示海报】图片放在所有图层的最上方。
8、预览看效果。
9、为了让显示截屏的结果图显示更加明显，我们添加一个半透明的图形放在【显示海报】的图片下方，并勾选初始隐藏。
10、在截屏的触发行为显示组件区域补充显示下该图形，一般称半透明遮罩。
11、预览查看最终效果：
12、其他效果完善：
如果仔细观察，会发现目前的截屏结果是变形的，我们截屏的，原因是截屏区域需要和显示截屏的结果图尺寸【比例】保持一致。
如何处理：
1、如果不勾选设定截屏区域、，默认截屏区域是画布内框，尺寸是375*603像素。
2、这次的案例我们使用的截屏区域大小是特意设置过的，如下图：
3、【显示海报】的图要跟截屏区域尺寸比例保持一致。可以先把【显示海报】图的尺寸调整为跟截屏区域保持一致。
4、然后再去锁定该【显示海报】的比例，拉伸【显示海报】图，调整其尺寸比例。
5、【显示海报】图片显示方式为【撑满】。截屏原理是将合成的截屏内容填充到已有的图片中，直至撑满。
6、其他需求：一般截屏结果图需长按保存到相册或转发分享，则要给替换图勾选【二维码可识别】，如下图所示：
注：在微信环境下或大部分手机APP中支持长按保存到手机，也有个别APP不支持的，需要看该APP是否具备该功能。
7、结束。预览查看效果：
常见问题补充：