.

17.截屏组件(合成海报)

小常发表于:2017年08月30日 18:27:59更新于:2019年07月19日 15:02:52

《感恩节海报视频教程》

《旅途中的风景视频教程》


一、案例效果

0015a6c80fe817cb5af624f2b9a21ab

《感恩节海报》


0015bff9182a82d2b4615589f680332

《旅行中的风景》


二、应用场景

文末附件下载素材,非商用,仅供学习使用。


如果要将H5页面上的多个元素,包括图片、幻灯、序列帧、段落组件合成在一张图片上,并保存下来,这就需要 “截屏” 组件了。

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

  • 制作个性化邀请函

  • 单页海报

  • 游戏获奖证书

  • 照片拼图......

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

合成海报案例区》》》


三、素材准备

1.因为截屏组件合成元素后,不能自己显示合成的内容,必须借助另外的一张图,来显示合成内容,后面我们称这个图片为替换图。为了保证合成后的内容能刚刚好放在替换图里,不会变形,需要合成图片的尺寸比例跟截屏区域保持一致,一般截屏组件默认的截屏区域是画布内框尺寸。

0015ca3378d542f3a62c350e4ab2d93


2.参与截屏的内容一定要有一个底图,这个底图建议设计尺寸为:844x1496px

如果对截屏区域不作调整,最终合成好的图片取画布内框尺寸:375x603px 


四、组件用法

基本用法

1.点击截屏组件,添加到页面中


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


3.在逻辑小面板选中截屏组件,将页面内图片/段落组件添加到 “截屏” 组件中:  


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


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

0015ca336732370b46aee728599be78


6.截屏的内容不能自己显示,需要借助一张图片来替换并显示的内容,有两种方式可以选择,二选一即可:

方法一:在其他页面显示截屏内容

方法二:当前页显示截屏内容


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

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


高级用法

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

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

image.png


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

image.png


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

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


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

image.png


4.图片样式参与截屏

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

0015a29078c9892be7fe1ff8eac6814


(2)截屏后的效果如图:

0015a2908784b5feb723707184fcdd8


5.其他注意事项

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


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


常见问题补充:

  1. 为什么我合成后的海报图片保存不下来?

  2. 为什么我已经将截屏内容赋值给全局变量,但在其他页面替换资源时始终不显示?

  3. 当前页点击截屏按钮,为什么截屏没有反应?

  4. 可以用页面触发器截屏吗?

附件:截屏组件素材.zip • 304.52KB • 下载