17.截屏组件

小常发表于:2017年08月30日 18:27:59更新于:2018年03月22日 16:15:04

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

0015a6c80fe817cb5af624f2b9a21ab

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

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


截屏组件

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

  • 制作个性化邀请函

  • 单页海报

  • 游戏获奖证书

  • 照片拼图......

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

设置方法

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

2.  添加截屏组件

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

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

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

 

特别提醒:

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


目前有两种常用方法(根据个人需求二选一):


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


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

全局变量的设置

image.png

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

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


image.png

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


方法二:直接在当前页显示截图(不跳转页面,所以不使用全局变量)


关键点:截屏组件/一张要替换的图片(一定设置初始隐藏)


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

image.png

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

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

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

  • 合成图片的尺寸规格

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

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

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

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

image.png

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

image.png



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

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

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

image.png


注:

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


0015a29078c9892be7fe1ff8eac6814


截屏后的效果如图:


0015a2908784b5feb723707184fcdd8


注:

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

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

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

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