龙空技术网

H5合成海报

叫小番 130

前言:

现在你们对“h5可以上传图片吗怎么弄的”大约比较注重,姐妹们都需要学习一些“h5可以上传图片吗怎么弄的”的相关知识。那么小编同时在网摘上汇集了一些关于“h5可以上传图片吗怎么弄的””的相关内容,希望姐妹们能喜欢,咱们一起来了解一下吧!

关于H5平台

H5制作起来上手快、效果好,个人营销推广的佳品。兔展、易企秀、意派360等平台,大同小异,要做一个用户互动的H5,传播起来更容易。

——叫小番

总体效果

基本流程

H5平台:意派360;

大概耗时:一个小时;

制作难点:参数变量、全局变量;

过程概述:基本功能如:截屏、微信头像、二维码、画板等可以上平台教程区观看。这个H5是让用户分享海报,以图片识别二维码的方式进入H5,用户第一步上传自己的图片、第二部手写签名、第三部合成图片海报。用户保存图片,可以自行分享到朋友圈。

第一页:一个文字打字出现的效果

1、“诚信315”样式是图片遮罩;

2、打字效果:选中字体,在动画中选择【逐字出现】,点击逐字出现,动画的持续时间、动画效果。

第二页:设置XX拍照和上传图片的全局变量

1、选中上传图片的按钮,点击时选择“XX拍照/上传图片”。修改XX拍照/上传图片 触发器,把图片赋值给“@上传图片@”这个全局变量。

2、添加触发行为,上传成功时——替换资源,找到创建的@上传图片@这个全局变量。把诚信315图片替换成XX拍照的全局变量所上传的图片。全局变量是在整个H5页面都可以添加,可以赋值给元素。

第三页:添加layer层、画板

1、添加layer层,可以理解成图片上模板,在模板上添加的元素部分显示在页面里;

2、添加画板功能,设置画板大小即可;

3、点击“完成”按钮时,跟XX拍照变量一样,设置一个签名全局变量;

4、画板写的字体转成一个图片,赋值给签名全局变量;

第四页:截屏、XX头像、替换资源

1、截屏功能,置于最顶层,把要截屏的元素选择中;

2、把签名和诚信315图片替换。同样的方式,分别选择元素,添加页面触发器—切换到当前页时[替换资源],这里的替换资源和前两页一样,都是使用全局变量传递;

3、建立一个新的全局变量,用来储存截屏生成的最后海报;

4、点击保存图按钮时,跳转到最后一页;

第五页:参数变量、计时器、预加载页面

1、切换到当前页时,添加替换资源,把截屏生成的图片展示出来。

2、增加加载页,提高用户体验,同时,防止H5未替换完元素就生成海报,这样最后的海报有部分还没有更换。

3、计时器和预加载页面配合使用。预加载页面摆好GIF加载图,计时器用参数变量赋值的方式,参数变量初始值为0,最终值为100。

4、计时器开始时赋值给参数变量,设置计时器每隔0.03秒,参数变量就增加1,这样参数变量到达100时,计时器暂停,完成。

5、计时器完成后,先设置替换资源,后设置显示最终海报;

6、设置提示语,提醒用户保存海报。

提示:制作中的坑

1、意派360编辑时没有标尺,不能元素对齐,可以用自己电脑上的图片当标尺,能解决对齐元素。

2、预加载页面过快,最后合成的海报替换元素不全,甚至海报缺少部分。可以增加计时器的间隔时间。

3、最后胜出的海报不能识别二维码,把替换海报的图片,设置二维码可识别。

4、XX头像不出来,在页面中设置需要用户授权。

5、不要试图生成二维码上加入不可信网站,或者个人链接等,XX平台会把含有不可信链接的H5屏蔽。

点击拓展链接,或者看评论来体验下吧

标签: #h5可以上传图片吗怎么弄的