h5上传图片_如何在线生成教师节H5贺卡？

马上就是教师节啦，除了送礼物以外，一份贴心的自制贺卡也同样能够向恩师传达浓浓的敬意。 例如：

有一份教师节贺卡等你来查收

这是一款教师节H5贺卡模板，用户可上传照片、选择文字，以获得一份专属的教师节贺卡。有了这个H5，用户就可以快速生成不同的贺卡，并分享给各个老师了。

此类H5是合成海报H5中的一种，算是最基础的H5创意形式了，你可以用意派Epub360的截屏组件来制作。它可以将图片、幻灯、序列帧、段落等多个元素合成在一张图片上并保存下来。除了制作贺卡H5以外，意派Epub360的截屏组件还可用于制作个性化邀请函、单页海报、照片拼图等各种类型的H5。

想知道如何在线生成教师节H5贺卡？快来仔细参考意派Epub360的教程吧！

PS：虽然教程中的案例主题与教师节不同，但都是关于截屏组件的，核心方法是不变的哟~

视频教程：

《感恩节海报视频教程》

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

图文教程：

一、素材准备

1.为了保证合成后的内容能刚刚好放在替换图里且不会变形，我们要确保合成图片的尺寸比例跟截屏区域保持一致。一般来说，截屏组件默认的截屏区域是画布内框尺寸。

2.参与截屏的内容一定要有一个底图，这个底图建议设计尺寸为：844x1496px。如果对截屏区域不作调整，最终合成好的图片取画布内框尺寸：375x603px。

二、基本用法

1.找到截屏组件，并将其添加到页面中

2. 在页面中放好图片、段落等需要在合成图片中出现的组件

http://laozhao.epub360.com/v2/manage/book/d4ps0k/ (二维码自动识别)

3.在逻辑小面板选中截屏组件，将需要在合成图片中出现的组件添加到 “截屏” 组件中

4. 添加一些提示用户操作的提示语和按钮

5. 该案例里是给 “完成” 按钮添加了点击触发器的，以便触发截屏组件来合成图片

6.截屏组件合成元素后不能自己显示合成的内容，必须借助另外一张图来显示，我们称这个图片为【显示海报图片】。添加后，我们需在该图片的右侧面板中勾选初始隐藏。

注意要点：

（1）显示截屏的图片显示方式为【撑满】。

（2）截屏组件默认的截屏区域是画布内框尺寸，所以，【显示海报图片】的尺寸比例是375x603px。

7.在页面中添加一个按钮，并给它设置触发器：点击时触发截屏。此外，我们也可以用计时器触发截屏。但不建议直接用页面触发器触发，防止有些素材未加载完毕就截屏了。

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

9.合成后的图片如何保存下来？一定要给最终用来显示的图片组件（也就是【显示海报图片】）勾选 “二维码识别”，这样才可以长按后弹出菜单，以便进行保存或转发。

10.以上方式可以满足当前页面截屏后的海报显示，还有另外一种方式可以满足截屏后的图片在其他页面显示，有需要的可以通过该教程学习：在其他页面显示截屏内容

以上就是在线生成教师节H5贺卡的简要过程了，如有疑问，请自行咨询意派客服。