VPS参考测评推荐
专注分享VPS主机优惠信息
衡天云优惠活动
华纳云优惠活动
荫云优惠活动

手把手指导你实现虎年画框制作小程序(练习)(制作新年画框)

主机参考:VPS测评参考推荐/专注分享VPS服务器优惠信息!若您是商家可以在本站进行投稿,查看详情!此外我们还提供软文收录、PayPal代付、广告赞助等服务,查看详情!
我们发布的部分优惠活动文章可能存在时效性,购买时建议在本站搜索商家名称可查看相关文章充分了解该商家!若非中文页面可使用Edge浏览器同步翻译!PayPal代付/收录合作

虎年春节马上就要到了。如何添加虎年头像框的图片?下面这篇文章带你制作一个小程序来实现这个功能,希望可以帮助到你!

手把手指导你实现虎年画框制作小程序(练习)(制作新年画框)

又到年底了,感觉时间过得很快,一晃就过去了,一晃就过去了。

记得去年因为疫情没有回家过年。30号晚上还在家庭微信群里发了玩游戏领红包的小程序,也很开心。

虽然我自己从来没有开发过小游戏,但我写过一些小程序。最近,我看到许多朋友贴上了年画。像下面这样:

1.png

看完主要有两部分:图片+相框叠加保存为图片,那我也可以实现一个。

于是就有了这篇文章,自制虎年头像框小程序。

话不多说,先上效果图。

2.gif

1、实现原则

从效果图中可以看到,这里使用了两张图片:

一个是通过“获取头像”按钮获取的微信用户头像,作为底图;

另一种是画框,是预制的静态资源;

当你点击“保存《阿凡达》”时,通过画布在画板上绘制上述两幅图片,先绘制底图,然后绘制相框。画好之后,将图片保存在本地画板上。

具体实施步骤介绍如下。

3.png

2.收集静态资源

我的小程序内置了一些静态资源,比如:头像框图片、主页背景图片、底部导航栏图标等等。

这些图片来自以下网站,仅供参考。

获取图标的好地方。

获取背景图片、头像框等的好地方。

3.编码

它分为三个部分来介绍这一阶段的编码。

3.1获取微信用户头像

微信小程序提供api获取微信用户信息。wx.getUserProfile(对象对象)

点击按钮按钮获取微信用户信息:

获取头像//建议使用wx.getUserProfile获取用户信息。每次开发人员通过此接口获取用户个人信息时,用户都必须确认get user profile(e){ let that = this;wx . get user profile({ desc:& # 39;仅用于生成头像& # 39;,//声明获取用户个人信息的目的,稍后会在弹窗中显示。请仔细填写成功:(RES)=》{//获取高清用户的头像let URL = RES . userinfo . avatar URL;而(!isNaN(parse int(URL . substring(URL . length -1,URL . length))){ URL = URL . substring(0,URL . length -1)} URL = URL . substring(0,URL . length -1)+“/0“;RES . userinfo . avatar URL = URL;that . setdata({ userInfo:RES . userInfo,has userInfo:true })} });},这里获取微信用户头像已经完成。

3.2绘制图像

绘图主要使用微信小程序提供的画布相关API(https://developers . weixin . QQ . com/mini program/dev/API/canvas/wx . createoffscreencanvas . html)。

hotArr:

当然,基于以上内容,你也可以制作自己的头像小程序。

最后,提前祝大家春节快乐、虎年大吉!!!

6.gif

【相关学习推荐:小程序开发教程】

以上就是小程序(做法)手把手带你认识虎年头套的详细内容。更多内容请关注主机参考其他相关文章!

这几篇文章你可能也喜欢:

本文由主机参考刊发,转载请注明:手把手指导你实现虎年画框制作小程序(练习)(制作新年画框) https://zhujicankao.com/105022.html

【腾讯云】领8888元采购礼包,抢爆款云服务器 每月 9元起,个人开发者加享折上折!
打赏
转载请注明原文链接:主机参考 » 手把手指导你实现虎年画框制作小程序(练习)(制作新年画框)
主机参考仅做资料收集,不对商家任何信息及交易做信用担保,购买前请注意风险,有交易纠纷请自行解决!请查阅:特别声明

评论 抢沙发

评论前必须登录!