视频教程:
《感恩节海报视频教程》
《旅途中的风景视频教程》
一、案例效果
二、应用场景
文末附件下载素材,非商用,仅供学习使用。
如果要将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)文字或者段落的样式不能被截屏保存,例如滤镜,阴影等效果,但是不会影响文字段落的基本布局。
常见问题补充: