h5保存图片到手机_母亲节策划｜教你如何制作H5签名电子贺卡！

母亲节到了，教你怎么制作朋友圈高逼格的母亲节H5主题感恩贺卡！快来把对母亲的爱写下来吧！

一、案例效果

效果一：

《感恩节海报》​www.epub360.com

效果二：

母亲节贺卡模版-H5案例作品展示－意派∙Epub360​www.epub360.com

点击学习视频教程

二、素材准备

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

制作软件传送门：在线交互软件Epub360

三、功能设置

输入祝福语——亲笔签名——检查确认——生成海报

输入祝福语页面

1.增添段落组件，勾选文本可编辑。修改提示语为”感恩节来了，在这里点击输入你想说给大家的话吧~“点击时设置激活编辑状态

2.增添一个全局变量命名为祝福语，格式改为文本

3.“下一页”点击触发设置：设置参数值，将段落赋值给这个全局变量并跳转页面

签名页面

1.插入高级组件——画板，勾选笔触效果

2.增添一个全局变量命名为用户签名，格式改为文本

3.“下一步”点击触发设置：画板设置选择转成图片操作，勾选画板元素，将画板转成的图片关联这个全局变量并成功后跳转页面

4.”重新写“点击触发设置：画板设置选择清空画板操作，勾选画板元素

检查确认页面

1.添加段落组件

2.用页面触发器——切换到当前页：设置参数值，把之前页面里收集的 “想说的话”全局变量赋值给段落组件

3.添加图片容器

4.用页面触发器——切换到当前页：替换资源触发器，把之前页面里收集的 “用户签名”全局变量赋值给图片容器

5.添加图片容器，命名为邮票

6.用页面触发器——切换到当前页：替换资源触发器，把微信头像参数赋值给”邮票“的图片容器

7.添加截屏组件，并选择需要被截屏的元素

8.添加全局变量命名为”海报“，格式改为文本

9.”完成“点击触发设置：截屏设置，选择截屏组件，将截屏图片关联到”海报“的全局变量，成功后跳转页面

生成海报页面

1.添加一个空白替换的图片，勾选 “二维码识别”（这样才可以确保长按后弹出菜单进行保存或转发）

2. 用页面触发器——切换到当前页：替换资源，把 全局变量“海报”替换到图片组件中

3.特别提示：

（1）段落组件，勾选文本可编辑并设置点击时激活编辑状态

（2）全局变量，改成文本

（3）画板组件，笔触效果

（4）画板组件，生成图片的关联

（5）截屏组件，需要所要截屏的元素

（6）截屏组件，生成图片的关联

（7）头像的获取，头像参数

（8）图片容器，需勾选二维码识别这样才可以确保长按后弹出菜单进行保存或转发

4.其他母亲节主题H5：

妈妈的爱，全藏在这支H5里面了-H5案例作品展示－意派∙Epub360​www.epub360.com 一心二用真妈妈-H5案例作品展示－意派∙Epub360​www.epub360.com 母亲节：一个不收礼物的女人-H5案例作品展示－意派∙Epub360​www.epub360.com 母亲节贺卡模版-H5案例作品展示－意派∙Epub360​www.epub360.com

更多交互逻辑应用、融媒体创作、H5交互设计请关注专栏：玩转Epub360