.

17.截屏组件:合成海报/图片

小常发表于:2017年08月30日 18:27:59更新于:2021年10月22日 15:44:18


00160f671a5c71208be24708618dbd2


感恩节海报视频教程

旅途中的风景视频教程

一、案例效果

0015a6c80fe817cb5af624f2b9a21ab

《感恩节海报》


0015bff9182a82d2b4615589f680332

《旅行中的风景》


二、应用场景

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


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

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

  • 制作个性化邀请函

  • 单页海报

  • 游戏获奖证书

  • 照片拼图......

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

合成海报案例区》》》


三、素材准备

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

0015ca3378d542f3a62c350e4ab2d93


2.  参与截屏的内容一定要有一个底图,这个底图建议设计尺寸为:844x1496px(即可以铺满整个白色出血区的大小)

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


四、组件用法

基本用法

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


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

image.png


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

image.png


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

image.png


5.  案例里,是给【完成】按钮的上方添加了一个透明的【热区】组件,点击【热区】时触发截屏。

上文中我们提到,截屏的内容不能自己显示,必须借助另外的一张图,来显示合成内容,我们称这个图片为替换图。(替换图的内容不重要,在截屏后都会被替换成我们想要截屏的内容,但仍然推荐用一张透明的空图片作为替换图。)

在截屏触发器的设置面板中,我们在【截屏组件关联到】的设置中,将准备好的替换图添加到这里来。这样,我们截屏的内容便会替换到这张替换图上面去了。

image.png


6.  截屏替换有两种场景,分别为【在当前页显示截屏图片】,与【在其他页面显示截屏图片】。根据使用场景的不同,我们在截屏触发器中需要设置的截屏图片关联内容也有所不同,我们在此一一进行介绍。

(A)在当前页显示截屏图片。详细教程请戳此处。

在点击了【完成】按钮后,我们会将页面中的内容进行截屏,并在当前页显示。为了让截屏后的图片(上文的替换图)可以不被任何元素遮挡,我们通常要将截屏后的图片放在所有图层的最上方,并在右侧属性面板处勾选初始隐藏,直到截屏后显示。

完整步骤如下:添加需要截屏的元素——添加截屏后的替换图——让截屏替换图初始隐藏——添加截屏组件——将需要截屏的元素全部添加到截屏组件中——在【完成】按钮上设置点击时触发截屏操作——在截屏触发器上设置截屏图片关联到替换图上——在截屏触发器上设置截屏成功后显示替换图。

注意要点:

(1)截屏的替换图显示方式为【撑满】。

(2)默认截屏区域是画布内框,所以【替换图】尺寸比例可以不是375X603,但宽高比必须等比大小。否则截屏后可能会截屏内容变形。

如果截屏替换图需要可以在微信环境下长按保存到相册或转发分享,则要给替换图勾选【二维码可识别】(如下图所示)

image.png

(3)未防止在本页截屏成功后,由于背景杂乱导致看不清截屏内容,我们通常会在截屏成功后隐藏其他不必要的元素,或在其他不必要的元素上方、截屏替换图下方添加一张深色半透明的遮罩,来使截屏替换图清晰完整显示。

image.png

上图为截屏后的几种图片显示方式,仅供参考

(4)在页面中添加一个按钮(可以是自己设计的图片),给它设置触发器,点击时触发截屏;也可以用计时器触发截屏,不建议直接用页面触发器触发,防止有些素材未加载完毕去截屏会不成功。

image.png

(5)触发行为面板具体设置。截屏成功后触发元素显示【显示海报图片】,因为该图是初始隐藏的。

image.png


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

image.png

以上方式,可以满足当前页面截屏后海报显示,还有另外一种方式是截屏后的图片在其他页面显示,有需要的可以戳下方文字链接。


(B)在其他页显示截屏图片。详细教程请戳此处。

上文中的方法,将【截屏组件】关联给了本页所在的替换图上面,但如果我们不希望在本页显示截屏图片,而希望在其他页面显示截屏图片时,我们便不能再将截屏内容关联给本页的替换图了,而需要借助【全局变量】组件,将截屏内容关联给【全局变量】,到了其他页面后,再将全局变量中保存的截屏内容通过【替换资源文件】触发器替换给其他页面的替换图去呈现。详细使用方法如下:

完整步骤如下:在页面A添加需要截屏的元素——添加用于保存截屏内容的全局变量组件——将全局变量组件的类型设置为文本——添加截屏组件——将需要截屏的元素全部添加到截屏组件中——在【完成】按钮上设置点击时触发截屏操作——在截屏触发器上设置截屏图片关联到全局变量上——在截屏触发器上设置截屏成功后跳转到页面B——在页面B添加截屏后的替换图——在页面B的页面触发器上设置切换到当前页时执行【替换资源文件】——将刚刚的全局变量内容替换给页面B中的替换图——完成。

注意要点:

(1)截屏内容是字符串形式的一串网址,所以全局变量的字段类型需是文本,才可以将截屏内容存储。

(2)在页面B的页面触发器上设置替换资源文件的触发,将全局变量替换给本页的图片。

image.png

image.png

image.png


高级用法

1.指定截屏区域进行截屏

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

image.png

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

image.png


3.生成文件选项,默认不勾选,截屏在H5作品中立即生成,时间更短。

如果需要将截屏的图片保存到数据库,需要勾选生成文件,且需要结合数据库的新建数据操作,后台单独新建数据表。《1.数据库(视频教程)【仅专业版以上版本可商用】》

0015ea4fd7baecd19bc846d5137ae3f

4.截屏时包含所有可复制组件。该功能是针对DIY图片组件,复制后的组件也可以参与截屏使用的,如果页面中没有DIY图片组件可以不用勾选。DIY图片组件教程请戳此处。

image.png


5.图片样式参与截屏

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

0015a29078c9892be7fe1ff8eac6814


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

0015a2908784b5feb723707184fcdd8

6.其他注意事项

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


常见问题补充:

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

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

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

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

  5. 可以将自己填写的祝福海报截图后分享给别人吗?

  6. 17.1.截屏合成的图片如何显示出来?【方法一】

  7. 17.2.截屏合成的图片是如何显示出来的【方法二】

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